Blog and Web

Modificar el color de texto seleccionado con CSS

Las especificaciones para CSS3 traen consigo interesantes características, entre ellas, la posibilidad de modificar el color del texto cuando es seleccionado (por defecto azul) por medio del pseudo-elemento “selection“. Su forma de aplicación es sencilla, por ejemplo, para aplicarlo al texto de toda la página se tiene:

/* Para Safari */
::selection {
background: #ccc;
}

/* Para Firefox */
::-moz-selection {
background: #ccc;
}

Y claro, también se puede aplicar a selectores y clases, por ejemplo para el selector “p” usual en el cuerpo de la entradas:

p.post-body:selection {
background: #ccc;
}

p.post-body:-moz-selection {
background: #ccc;
}

Solo hay que tener en mente que las pseudo-clases, por ahora, solo son soportadas por los navegadores más modernos como firefox o safari.

demo | vía: css-tricks / intenta