Cuándo seleccionamos texto en una página web, el fragmento seleccionado queda resaltado con un color de fondo y un color de fuente determinado. Los colores utilizados dependen del navegador y sistema operativo, no hay un estándar al respecto, pero podemos utilizar el selector CSS ::selection para establecer otros diferentes.

Antes de seguir, has de saber que el selector CSS ::selection fue propuesto para CSS3 pero finalmente fue descartado y actualmente no está incluido en ningún estándar, aunque está incluido en el borrador CSS Pseudo-Elements Module Level 4.

El selector ::selection admite las siguientes propiedades CSS:

  • color: para establecer el color de fuente
  • background-color: para establecer el color de fondo
  • text-shadow: para establecer un efecto de sombreado del texto

Por ejemplo, el siguiente CSS se aplicaría al texto seleccionado contenido en elementos <p>:

p::selection {
    background: green;
    color: black;
    text-shadow: 1px 1px #fff;
}

/* Firefox */
p::-moz-selection {
    background: green;
    color: black;
    text-shadow: 1px 1px #fff;
}

Ejemplo

  • Telmo Martinez Moure

    Sabes si con Wix team también se puede cambiar el color del texto seleccionado?

  • muy bueno, sólo faltó aclarar que esto no funciona en otros navagadores excepto en CHROME. Saludos!

    • Hola Fernando. No mencioné que navegadores soportan el selector ::selection pero mencioné que no está actualmente incluido en ningún estándar. lo que indica claramente que puede no funcionar en cualquier navegador.

      De todas formas, no es cierto que sólo funcione en Chrome, funciona también en IE 9, Safari 1.1 y Opera 9.5. En Firefox funciona desde la versión 1 pero con el prefijo -moz. Actualizaré el post con esta información, gracias por el comentario.

    • Qué bueno que actualizaste a lo de Mozilla, excelente aportación y gracias por la aclaración, saludos 🙂