Cambiar el color del texto seleccionado con CSS

Cuando seleccionas texto en una página web el color por defecto que se muestra de esta selección es el texto en color blanco y el fondo de la selección en color azul. Cambiar el color del texto seleccionado puede resultar un detalle más para personalizar el sitio Web y darle un toque más de personalidad.

En la mayoría de proyectos es un detalle que en la mayoría de los casos se pasa por alto pero siempre te puedes encontrar con algún proyecto o cliente exigente que quiere personalizar al máximo su página Web. Una de sus solicitudes puede ser la que te explicamos en este tutorial. Cambiar el color del texto seleccionado.

En este artículo vas a ver como hacerlo de forma sencilla usando una regla de estilo CSS.

Añade el siguiente código en tu hoja de estilos:

Source code

*::selection {
    background-color: #E1D8CF;
    color: #683C11;
}
 
*::-moz-selection {
    background-color:#E1D8CF;
    color: #683C11;
}

Con estas reglas de estilo tan solo estamos indicando que deseamos que todo el texto seleccionado de la página Web se muestre con fondo marrón clarito y color del texto en marrón oscuro. Fíjate como quedaría en la siguiente imagen:

El atributo selection:: coincide con la parte de un elemento que selecciona un usuario en la página Web.

Solo algunas pocas propiedades CSS se pueden aplicar al atributo selection::

• Color
• Fondo
• Cursor
• Contorno

Si quisieras solo conseguir este efecto en algunos elementos de la página también lo puedes hacer. Por ejemplo, si solo quieres que se aplique a los párrafos de tu página Web puedes usar lo siguiente:

Source code

p::selection {
    background-color: #E1D8CF;
    color: #683C11;
}
 
p::-moz-selection {
    background-color:#E1D8CF;
    color: #683C11;
}

El atributo selection es compatible con la mayoría de navegadores modernos. Google Chrome, Internet Explorer, Mozilla Firefox, Safari y Opera lo soportan.

Ver demo Descargar