Cambiar el color de texto seleccionado

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

texto seleccionado

Gracias a una de las propiedades de CSS3 tenemos la posibilidad de personalizar el color con el que aparece seleccionado un texto cuando arrastramos el ratón sobre el. A pesar de que por defecto el navegador nos da un color predeterminado, azul la mayoría de las veces, puede ser interesante cambiar este color para que combine con nuestro diseño o conseguir un mayor contraste en nuestra web.

::selection {
background: #08E303;
color: white;
}
::-moz-selection {
background: #08E303;
color: white;
}
Cambio del color de texto seleccionado en diferentes bloques
Se pueden añadir diferentes bloques personalizados para aplicar distintos colores de texto seleccionado en nuestra web, por ejemplo: añadiendo las clases: yellow y red, una mostrará un fondo amarillo y la otra en rojo.
p.yellow::selection {
background: #E6F762;
}
p.yellow::-moz-selection {
background: #E6F762;
}
p.red::selection {
background: #FC2A2A;
}
p.red::-moz-selection {
background: #FC2A2A;
}
Esta característica es soportada por la mayoría de navegadores actuales: Firefox, Safari, Chrome, Opera…

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.