Gracias a una de las propiedades de CSS3 tenemos la posibilidad de personalizar el color con el que aparece seleccionado un texto cuando arrastramos el ratón sobre el. A pesar de que por defecto el navegador nos da un color predeterminado, azul la mayoría de las veces, puede ser interesante cambiar este color para que combine con nuestro diseño o conseguir un mayor contraste en nuestra web.
::selection {background: #08E303;color: white;}::-moz-selection {background: #08E303;color: white;}
Cambio del color de texto seleccionado en diferentes bloques
Se pueden añadir diferentes bloques personalizados para aplicar distintos colores de texto seleccionado en nuestra web, por ejemplo: añadiendo las clases: yellow y red, una mostrará un fondo amarillo y la otra en rojo.
p.yellow::selection {background: #E6F762;}p.yellow::-moz-selection {background: #E6F762;}p.red::selection {background: #FC2A2A;}p.red::-moz-selection {background: #FC2A2A;}
Esta característica es soportada por la mayoría de navegadores actuales: Firefox, Safari, Chrome, Opera…