Cómo personalizar el color de selección con CSS

Las posibilidades de CSS son muchísimas una que me gusta mucho es la posibilidad de personalizar el color de la selección de texto que en casi todos los navegadores es de color azul, pero si has probado seleccionar texto en este blog te habrás dado cuenta que es de color verde claro, bueno sólo si lo estás haciendo desde Firefox o Safari ya que Internet Explorer y Opera no soportan esa propiedad.

Para hacer que toda la página web tenga el nuevo color necesitamos incluir el siguiente código CSS

/* selector compatible con Firefox */
::-moz-selection{
    background: #D4F699; /* color de fondo */
    color: #7AA62F; /* color de texto */
}
/* selector compatible con Safari */
::selection{
    background: #D4F699; /* color de fondo */
    color: #7AA62F; /* color de texto */
}

Y no es todo, porque podemos especificar diferentes colores para nuesta página web, por ejemplo para los encabezados h1 va a ser de un color y los párrafos de otro color.

/* selector compatible con Firefox */
h1::-moz-selection{ /* para los encabezados h1 */
    background: #D4F699;
    color: #7AA62F;
}
p::-moz-selection{ /* para los párrafos p */
    background: #7AA62F;
    color: #D4F699;
}
/* selector compatible con Safari */
h1::selection{ /* para los encabezados h1 */
    background: #D4F699;
    color: #7AA62F;
}
p::selection{ /* para los párrafos p */
    background: #7AA62F;
    color: #D4F699;
}

Sólo les quiero recordar que los selectores ::selection y ::moz-selection no son estándares y por lo tanto hacen que tu CSS no valide correctamente.

Responder a Jorge Morales Cancelar la respuesta

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

13 comentarios en “Cómo personalizar el color de selección con CSS”

  1. Excelente, gracias por la información.

    U_U Lástima, me imaginé que era algo no estándar, pero igual se agradece (y de ahora en adelante implementa en mis webs =D)

    Saludos

  2. Hola, ::-moz-selection no es estándar, pero ::selection si lo es o, mejor dicho, lo será.
    Es una de las nuevas especificaciones de css3, por eso no valida como css2.

    Saludos!