Cómo cambiar el color de selección de texto en Firefox

viernes, octubre 08, 2010
COMPARTE EL POST

340x_new-firefox-logo_01Es quizá un efecto que no tiene de utilidad nada, sin embargo como diseñadores web este truquito les puede dar a su sitio web o blog un toque muy personal si es que saben como cambiar el color de selección de texto en Firefox y otros navegadores, es decir, que el color de fondo cuando seleccionamos texto sea diferente al azul feo que nos tienen acostumbrados algunos navegadores como Internet Explorer, entonces pueden probar ahora mismo en Firefox o Safari (no lo he probado en Chrome) que efectivamente el color de la selección de texto es diferente, y después del salto les digo como.

El resultado que podemos obtener sería algo así:

image

En este caso si desean cambiar el color de selección general se utiliza el siguiente estilo CSS (no olviden colocarlo dentro de las etiquetas <style></style>):

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

Si en cambio desean que diferentes secciones de texto seleccionen colores también diferentes, podrán hacerlo con el siguiente estilo para cada clase que queramos:

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;
}

El nombre de la clase no afecta en nada al efecto, puede ser reemplazado por el nombre que quieras, sin embargo como estamos hablando de párrafos la “p” podía ser que no la tuviéramos que quitar.

Vía DesignJuices

¡Síguenos en Twitter!


Deja tu comentario