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:
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
::selectionfue eliminado como selector, pero sigue siendo soportado por algunos navegadores. Actualmente, ::selection no se encuentra en ninguna especificación CSS.
Fuentes: Mozilla, Stack Overflow
Deja tu comentario