Cambiar el color del texto seleccionado con CSS3

El post del día de hoy es un pequeño tip de CSS que consiste en cambiar el color de la selección en una pagina web con el selector ::selection de CSS3

:: selection

El pseudo elemento ::selection aplica a la porción del documento que ha sido seleccionado por el usuario, también aplica por ejemplo al texto seleccionado dentro de un cuadro de texto.

Las propiedades que se pueden aplicar a ::selection son: color, background, cursor(opcional), outline(opcional).

Nota: Los navegadores que soportan ::selection son: IE9+, Opera, Google Chrome and Safari, para mozilla debemos utilizar ::-moz-selection.

Aquí les dejo unos ejemplos de ::selection

/* Aplica a cualquier texto seleccionado en la página */
::selection{ background:green; color:red; }
::-moz-selection{ background:#f4fa97; color:#ad2779; }

Ver ejemplo

/* Aplica a la selección de los párrafos de la pagina*/
p::selection{
    background:purple;
    color:yellow;
}

Ver ejemplo

/* Aplica a la selección de las tablas de la pagina*/
td::selection{ background:#f4fa97; color:#ad2779; }
td::-moz-selection{ background:#f4fa97; color:#ad2779; }

Ver ejemplo

Deja un comentario