Artículo

---

2 ¡votar!

Cambiar el color de la selección utilizando CSS

Un aspecto que se puede modificar en cualquier diseño pero que nunca se suele modificar, es el color de la selección de texto. Por defecto, los navegadores suelen poner un color azul, pero este color puede dificultad saber lo que hemos seleccionado por similitud con el color del entorno.

El cambio de color de la selección de texto en una web se puede hacer mediante propiedades CSS3. El código que vamos a poner es soportado por los navegadores Firefox, Chrome, Opera y Safari.


La propiedad que hace posible el cambio de color es selection en sus diferentes formas para los navegadores. El código que utilizaremos será:

::selection {
background:#f094b7;
color:#555;
}
::-moz-selection {
background:#f094b7;
color:#555;
}
::-webkit-selection {
background:#f094b7;
color:#555;
} 

El código es el mismo, lo único que cambia es el nombre de la propiedad, según el motor que implemente el navegador. Este código es para un caso general, pero si queremos que distintas zonas tengan distintos colores, eso también se puede hacer.

p.orange::selection {
background:#c2660d;
color:#fff;
}
p.orange::-moz-selection {
background:#c2660d;
color:#fff;
}
p.orange::-webkit-selection {
background:#c2660d;
color:#fff;
}
p.blue::selection {
background:#2d7e99;
color:#fff;
}
p.blue::-moz-selection {
background:#2d7e99;
color:#fff;
}
p.blue::-webkit-selection {
background:#2d7e99;
color:#fff;
} 

Vía: designjuices
Ver demo

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios