Color del texto al seleccionar

Unas de las cosas mas sencillas pero que le dan vida a nuestra web es el subrayado del texto, el cambiar de color al seleccionar de nuestra pagina cualquier cosa, el subrayado es uno de los aspectos mas importantes, por mas simple que parezca, para cambiarlo debemos utilizar CSS y cargar la propiedad "selection":

::selection {background: #ffb7b7; color: #fff;}
::-moz-selection {background: #ffb7b7; color: #fff;}
   Donde background es el color de fondo y color es el color del texto al ser seleccionado, esto nos dara como resultado lo siguiente:

Selecciona el texto para ver el ejemplo


   Pero no solo podemos definir que todo lo que seleccione sea del mismo color, sino que podemos crear un tipo de seleccion para cada atributo, para enlaces, parrafos, contenedores, o lo que quedamos, sería cuestion de definir cada clase por separado. Tomando como ejemplo el codigo anterior, utilizaremos la selección para el párrafo y otro para un enlace:

p.ej::selection {background: #ffb7b7; color: #fff;}
p.ej::-moz-selection {background: #ffb7b7; color: #fff;}
a.ej::selection {background: #ffb7b7; color: #fff;}
a.ej::-moz-selection {background: #ffeda4; color: #fff;}
   Y el HTML sería:

Esto es el parrafo pero, el enlace es de otro color

   Lo que nos da como resultado lo siguiente:

Esto es el parrafo pero, el enlace tiene otro color


   Como veremos las posibilidades son muchas, y utilizando las referencias del ejemplo anterior podemos crear efectos visuales de buen rendimiento utilizando cosas sencillas, por ejemplo, podemos definir varias clases de parrafos:

p.amarillo::selection {background: #fff2a8;}
p.amarillo::-moz-selection {background: #fff2a8;}
p.azul::selection {background: #a8d1ff;}
p.azul::-moz-selection {background: #a8d1ff;}
p.rojo::selection {background: #ffb7b7;}
p.rojo::-moz-selection {background: #ffb7b7;}

   Y utilizarlas para crear efectos de selección, dando como resultado lo siguiente:

Color Amarillo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ante dolor, mattis at posuere in, condimentum et tellus. Praesent blandit, ipsum ac euismod condimentum, lorem turpis mollis libero, sit amet egestas nunc orci vel neque. Mauris eu lacus nibh, at bibendum ante. Sed mollis dolor ut justo aliquam sit amet auctor nisi elementum. Integer lobortis leo eget nisl sagittis ullamcorper. Nulla placerat libero a enim iaculis a rutrum nisl fermentum. Sed ac interdum odio. Vivamus ultricies porttitor augue, nec aliquet nisl consectetur id. Aenean tempor, felis a dapibus accumsan, est libero scelerisque nunc, id porttitor massa orci eu dolor. Aliquam sit amet placerat neque. Sed fermentum tempor dolor, sed egestas nisi rutrum a. Praesent quis lorem lorem. Nulla mollis risus in dolor cursus vel aliquet orci elementum.



Color Azul

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ante dolor, mattis at posuere in, condimentum et tellus. Praesent blandit, ipsum ac euismod condimentum, lorem turpis mollis libero, sit amet egestas nunc orci vel neque. Mauris eu lacus nibh, at bibendum ante. Sed mollis dolor ut justo aliquam sit amet auctor nisi elementum. Integer lobortis leo eget nisl sagittis ullamcorper. Nulla placerat libero a enim iaculis a rutrum nisl fermentum. Sed ac interdum odio. Vivamus ultricies porttitor augue, nec aliquet nisl consectetur id. Aenean tempor, felis a dapibus accumsan, est libero scelerisque nunc, id porttitor massa orci eu dolor. Aliquam sit amet placerat neque. Sed fermentum tempor dolor, sed egestas nisi rutrum a. Praesent quis lorem lorem. Nulla mollis risus in dolor cursus vel aliquet orci elementum.



Color Rojo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ante dolor, mattis at posuere in, condimentum et tellus. Praesent blandit, ipsum ac euismod condimentum, lorem turpis mollis libero, sit amet egestas nunc orci vel neque. Mauris eu lacus nibh, at bibendum ante. Sed mollis dolor ut justo aliquam sit amet auctor nisi elementum. Integer lobortis leo eget nisl sagittis ullamcorper. Nulla placerat libero a enim iaculis a rutrum nisl fermentum. Sed ac interdum odio. Vivamus ultricies porttitor augue, nec aliquet nisl consectetur id. Aenean tempor, felis a dapibus accumsan, est libero scelerisque nunc, id porttitor massa orci eu dolor. Aliquam sit amet placerat neque. Sed fermentum tempor dolor, sed egestas nisi rutrum a. Praesent quis lorem lorem. Nulla mollis risus in dolor cursus vel aliquet orci elementum.

2 Comentarios

Escribir Comentario
Anónimo
AUTOR
9 de octubre de 2011, 14:05 delete

muy buena informacion y de mucha ayuda siempre..... espero y me puedas ayudar con un problemita.... he investigado como poner subrayado en una etiqueta en java; pero no encuentro nada relacionado, espero y tu me puedas ayudar con esta interrogante n_n'

Responder
avatar
10 de octubre de 2011, 9:15 delete

Hola, como esta? Bueno, aunque eso no viene mucho al tema el asunto es que Java maneja HTML, por lo que puedes colocar en el texto del label algo como esto (en el texto, no en el nombre de la variable):

<html><strike>Esto es una prueba de HTML en JAVA</strike></html>

Responder
avatar

Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.

Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión EmoticonEmoticon