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.

9 Comentarios (Agrega el tuyo)

  1. aebs
    Comentado 15 Mayo 2008 a las 23:46 | Permalink | Responder ↓

    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. Comentado 16 Mayo 2008 a las 2:01 | Permalink | Responder ↓

    @aebs: sí es una lástima que no sea una propiedad estándar porque a mi me gusta mucho.

  3. Juan
    Comentado 16 Mayo 2008 a las 2:07 | Permalink | Responder ↓

    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!

  4. Comentado 16 Mayo 2008 a las 9:53 | Permalink | Responder ↓

    @Juan: muchas gracias po el dato

  5. Comentado 15 Junio 2008 a las 2:58 | Permalink | Responder ↓

    lo agruegue y no me funciona, en que parte del archivo style.css lo tengo que añadir?

  6. Comentado 15 Junio 2008 a las 2:59 | Permalink | Responder ↓

    ya funciono, lo agregue justo abajo de la descripcion del tema que es lo primeor que viene.

  7. Comentado 16 Junio 2008 a las 20:26 | Permalink | Responder ↓

    que podría hacer si quiero que en explore funciones o no se puede lograr ese efecto
    por que la verdad me gustaría aplicarlo en explore no por que me guste pero el maestro que tengo lo checa en explore

  8. Comentado 17 Junio 2008 a las 0:21 | Permalink | Responder ↓

    @Jose Antonio: por el momento no conozco algún método pero seguramente con ayuda de javascript lo puedes lograr.

  9. skimmo
    Comentado 24 Junio 2008 a las 23:53 | Permalink | Responder ↓

    necesito saver como poner backrund con fotos en mi space usando el sistema css o si hay algun sito que los probea gratis

Escribe un Comentario

Su correo nunca será publicado ni compartido. Los campos requeridos están marcados *

*
*

La gente que ha leido este artículo buscó:

(1) - (1) -