Cambiar el color de la selección utilizando CSS3

Es quizás algo que no se tiene en cuenta, pero el color de la selección es otro elemento que puede ser modificado para complementar el diseño de cualquier sitio. En mi caso, cuando debo leer mucho de un blog suelo acompañar la lectura seleccionando el texto y algunas veces se me dificulta el contraste con el azul clásico que viene por default.

Si desean combinar el color de la selección de texto con su paleta general de colores, se puede hacer de forma muy simple a través de CSS3. Es soportado por Firefox, Chrome, Opera y Safari. Y en caso de utilizar otro explorador, no hay cambio alguno por lo que a fin de cuentas no se verá ninguna diferencia.

En este caso si desean cambiar el color de selección general se utiliza el siguiente snippet:

::selection {
background:#f094b7;
color:#555;
}
::-moz-selection {
background:#f094b7;
color:#555;
}
::-webkit-selection {
background:#f094b7;
color:#555;
}

Si en cambio desean que diferentes secciones de texto seleccionen colores también diferentes, podrán hacerlo con el siguiente snippet:

p.orange::selection {
background:#c2660d;
color:#fff;
}
p.orange::-moz-selection {
background:#c2660d;
color:#fff;
}
p.orange::-webkit-selection {
background:#c2660d;
color:#fff;
}
p.blue::selection {
background:#2d7e99;
color:#fff;
}
p.blue::-moz-selection {
background:#2d7e99;
color:#fff;
}
p.blue::-webkit-selection {
background:#2d7e99;
color:#fff;
}

De esta forma podrán resaltar textos con varios colores, se que es un detalle, pero muchas veces este tipo de cosas hacen a la calidad general del sitio, sobre todo en cuestiones de lectura para el usuario. Pueden visitar el tutorial original de DesignJuices o ver la demo que han armado para visualizar el resultado.

Categorizado en: