Cambiar el color de la selección utilizando CSS3

VOLANTE10 · 07-10-2010 , 09:52:55

Cambiar el color de la selección utilizando CSS3

Es quizás algo que no se tiene en cuenta, pero el color de la selección es otro elemento que puede ser modificado para complementar el diseño de cualquier sitio. En mi caso, cuando debo leer mucho de un blog suelo acompañar la lectura seleccionando el texto y algunas veces se me dificulta el contraste con el azul clásico que viene por default.
Si desean combinar el color de la selección de texto con su paleta general de colores, se puede hacer de forma muy simple a través de CSS3. Es soportado por Firefox, Chrome, Opera y Safari. Y en caso de utilizar otro explorador, no hay cambio alguno por lo que a fin de cuentas no se verá ninguna diferencia.

En este caso si desean cambiar el color de selección general se utiliza el siguiente snippet:
::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 snippet:

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

De esta forma podrán resaltar textos con varios colores, se que es un detalle, pero muchas veces este tipo de cosas hacen a la calidad general del sitio, sobre todo en cuestiones de lectura para el usuario. Pueden visitar el tutorial original de

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link
Que es la reputacion? - Membresias Pagas

o ver la

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link
Que es la reputacion? - Membresias Pagas

que han armado para visualizar el resultado.

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Cambiar color de nombre de usuario	mancho6666	Preguntas	4	28-07-2010 17:51:56
¿De que color es tu cepillo de dientes ??que color gana?	melkin123	Hablar Mierdita	11	02-06-2010 00:34:49
Logran transmitir 2 Mbps utilizando luces LED	WeBMaSTeR_ShEvI	Noticias Tecnologicas	1	18-05-2010 23:14:56
Historia utilizando 1 sola palabra	Pipe Sanmiguel	Zona De Recreo	179	12-03-2010 17:07:53
UNA MONiTA UTILIZANDO LA GiLLETTE!!! Q BUENA RAZURADiTA..	-WesHiena-	Zona HOT, Solo Para Adultos	17	21-12-2009 17:04:21

Cambiar el color de la selección utilizando CSS3

Participa en el tema Cambiar el color de la selección utilizando CSS3 en el foro Programacion. ....

Participa en el tema Cambiar el color de la selección utilizando CSS3 en el foro Programacion.
....