Las posibilidades de CSS son muchísimas una que me gusta mucho es la posibilidad de personalizar el color de la selección de texto que en casi todos los navegadores es de color azul, pero si has probado seleccionar texto en este blog te habrás dado cuenta que es de color verde claro, bueno sólo si lo estás haciendo desde Firefox o Safari ya que Internet Explorer y Opera no soportan esa propiedad.
Para hacer que toda la página web tenga el nuevo color necesitamos incluir el siguiente código CSS
/* selector compatible con Firefox */
::-moz-selection{
background: #D4F699; /* color de fondo */
color: #7AA62F; /* color de texto */
}
/* selector compatible con Safari */
::selection{
background: #D4F699; /* color de fondo */
color: #7AA62F; /* color de texto */
}Y no es todo, porque podemos especificar diferentes colores para nuesta página web, por ejemplo para los encabezados h1 va a ser de un color y los párrafos de otro color.
/* selector compatible con Firefox */
h1::-moz-selection{ /* para los encabezados h1 */
background: #D4F699;
color: #7AA62F;
}
p::-moz-selection{ /* para los párrafos p */
background: #7AA62F;
color: #D4F699;
}
/* selector compatible con Safari */
h1::selection{ /* para los encabezados h1 */
background: #D4F699;
color: #7AA62F;
}
p::selection{ /* para los párrafos p */
background: #7AA62F;
color: #D4F699;
}Sólo les quiero recordar que los selectores ::selection y ::moz-selection no son estándares y por lo tanto hacen que tu CSS no valide correctamente.
12 Comentarios (Agrega el tuyo)
Excelente, gracias por la información.
U_U Lástima, me imaginé que era algo no estándar, pero igual se agradece (y de ahora en adelante implementa en mis webs =D)
Saludos
@aebs: sí es una lástima que no sea una propiedad estándar porque a mi me gusta mucho.
Hola, ::-moz-selection no es estándar, pero ::selection si lo es o, mejor dicho, lo será.
Es una de las nuevas especificaciones de css3, por eso no valida como css2.
Saludos!
@Juan: muchas gracias po el dato
lo agruegue y no me funciona, en que parte del archivo style.css lo tengo que añadir?
ya funciono, lo agregue justo abajo de la descripcion del tema que es lo primeor que viene.
que podría hacer si quiero que en explore funciones o no se puede lograr ese efecto
por que la verdad me gustaría aplicarlo en explore no por que me guste pero el maestro que tengo lo checa en explore
@Jose Antonio: por el momento no conozco algún método pero seguramente con ayuda de javascript lo puedes lograr.
necesito saver como poner backrund con fotos en mi space usando el sistema css o si hay algun sito que los probea gratis
Opera si soporta la propiedad de cambiar color de selección con CSS. Estoy navegando con opera y te aseguro que veo el color verde de seleccion.
No valida la hoja de estilo? que mal… no lo utilizare.
amm ola ps ioo keria saberr o keria ver si m pueden ayudarr para poder ponerle color alos comentarios k me dejann grax
Gracias, buen detalle para enriquecer los diseños, esperemos que en el futuro sea un estandar.
Saludos