Una de las nuevas opciones de CSS3, es que ¡podemos cambiar el color del selector!
Cuando subrayamos un texto, habitualmente, nuestro navegador nos lo muestra con un fondo azul, y las letras en blanco, por ejemplo:
Pues bien, eso podemos cambiarlo para que en nuestra página se muestre con otros colores, como:
Para ello, tendremos que escribir esto en nuestro css:
*::selection {
background-color: #eb3faf;
color: #fff;
}
*::-moz-selection { /* Esto para Firefox */
background: none repeat scroll 0 0 #eb3faf;
color: #fff;
text-shadow: none;
}
background-color: #eb3faf;
color: #fff;
}
*::-moz-selection { /* Esto para Firefox */
background: none repeat scroll 0 0 #eb3faf;
color: #fff;
text-shadow: none;
}
El asterisco se escribe para definir ese estilo a toda la página, si quisiéramos que el color se cambiase en alguna parte determinada, sólo tendríamos que sustituir el * por la etiqueta de lo que quisieramos cambiar, una de las posibilidades sería:
h1::selection {
background-color: #eb3faf;
color: #fff;
}
h1::-moz-selection { /* Esto para Firefox */
background: none repeat scroll 0 0 #eb3faf;
color: #fff;
text-shadow: none;
}
background-color: #eb3faf;
color: #fff;
}
h1::-moz-selection { /* Esto para Firefox */
background: none repeat scroll 0 0 #eb3faf;
color: #fff;
text-shadow: none;
}
Esto nos cambiaría el color al seleccionar los títulos de tipo h1.
Instagram
YouTube
Pinterest
RSS