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.

Recibe notificaciones por correo