Color de Texto Seleccionado

Una de las propiedades que se vienen en el nuevo CSS3 es la posibilidad de personalizar el color del texto seleccionado, algunos browser como Safari y Firefox ya lo vienen interpretando, con lo cual podremos personalizar mucho mas nuestros Webs.

textselection

Aplicando a todo el Texto
Para personalizar el texto seleccionado podemos utilizar el selector ::selection para Safari y ::-moz-selection en el caso de Firefox, el cual se aplica de la siguiente forma en la hoja de estilos.

[css]
::selection {
background: #009900;
color: white;
}
::-moz-selection {
background: #009900;
color: white;
}
[/css]

Aplicando a Diferentes Bloques
Además de ello se puede aplicar la personalización diferente para cada bloque de deseamos, para ello si tenemos bloques con la clase red y blue, entonces los estilos serían:

[css]
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
[/css]

Como pueden ver es sencillo de utilizar pero llegamos a controlar mucho mas la presentación que deseamos dar a nuestras paginas.

Comentarios Total 1 comentario


jose
Publicado: 12/05/2009 5:47 pm

hola… es que nesecito ayuda con un problem..
lo que quiero es que en mi pagina dinamica (php)
me aparesca un campo text que diga – digite su nombre y luego abajo seleccione un color .. cuando le de enviar en la otra pagina me salga el nombre de la persona con el color que escojio .. es decir el nombre del color que selecciono si me pueden ayudar gracias

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)