• Cambiar color texto seleccionado

Cómo cambiar el color de texto seleccionado con CSS

Los pequeños de detalles de diseño siempre llaman la atención, que una página web mantenga la coherencia del diseño en todos sus elementos es algo laborioso de conseguir, al menos, para una persona que no tenga un perfil puro de diseñador.

Un detalle que no suele tener en cuenta es el cambiar el color de texto seleccionado, en cualquier página web que se seleccione un texto, o incluso imagen, suele aparecer un color azul, como se observa en la siguiente imagen:

Ejemplo de color de texto seleccionado
Ejemplo de texto seleccionado con el color por defecto

Este color y fondo del texto seleccionado viene predefinido por el navegador web y el sistema operativo del ordenador.

Pero el color del texto seleccionado puede ser modificado por CSS. En esta web por ejemplo, se ha elegido el color naranja característico como color de fondo y un color blanco para la tipografía cuando se selecciona un contenido, tan solo se ha tenido que añadir el siguiente código CSS personalizado:

::selection { 
    background: #f86011; /*Color naranja para el fondo*/
    color:#fff;  /*Color blanco para el texto seleccionado*/
}

Al selector ::selection se le pueden editar las siguientes propiedades CSS para modificar el aspecto del texto seleccionado:

  • color: Define el color de la fuente del elemento.

  • background: Define el color de fondo del elemento.

  • text-shadow: Define un efecto de sombra sobre el elemento (soportado por Chrome y Safari y Firefox 17 y superior).

Este código CSS funciona para las últimas versiones de los navegadores más populares, a saber:

  • Opera
  • Edge
  • Firefox
  • Chrome
  • Safari

La página web de Mozilla informa que el pseudo-elemento ::selection fue eliminado como selector, pero sigue siendo soportado por algunos navegadores. Actualmente, ::selection no se encuentra en ninguna especificación CSS.

¡Valora este artículo y ayúdame a mejorar la calidad del blog!
(Votos: 0 Promedio: 0)

Deja tu comentario

Responsable de los datos: Javier Vallejo.
Finalidad: Introducir comentarios.
Legitimación: Tu consentimiento expreso.
Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de tus datos.

Ir a Arriba