Hacker of the Web
Tus ideas en código!...y mas

22ene2009

Cambiar el color de la selección del texto

A veces queremos cambiar el color de fondo de la selección del texto, ya que por default viene un color azulado que en algunas ocaciones no se ve. O simplemente por personalizar nuestra página web o blog, podemos utilizar el siguiente código CSS:

/!\ En esta entrada se asume que tienes conocimientos de como editar la plantilla. Si no sabes como o donde se modifica, revisa esta entrada: Como editar el código HTML de nuestra plantilla.



[1] Simplemente en la plantilla de el blog, antes de ]]></b:skin> o antes de </style> tienes que agregar:


::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}


En la propiedad:
background.- En esta se agrega el color en Inglés o en Hexadecimal.
color.- En esta se agrega también el color en Inglés o en Hexadecimal.

/!\ En esta entrada se asume que tienes conocimientos básicos de colores en RGB o Hexadecimal. Si no los tienes aún, revisa esta entrada: Colores en RGB o Hexadecimal.



Con esas lineas de CSS, tenderemos una selección de texto bastante presonalizada, pero si requieres un poco mas de personalización, puedes modificarlo de la siguiente manera:

OBJETO::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
OBJETO::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}

Objeto hace referencia a una etiqueta HTML, una clase o una ID, las cuales se definen en un objeto determinado, como puede ser de la siguiente manera:

DIV,CLASE o ID::selection{ 
background:#FFFFFF;
color:#FFFFFF;
}
DIV,CLASE o ID::-moz-selection{
background:#FFFFFF;
color:#FFFFFF;
}
<DIV class='CLASE' id='ID'>Seleccion de diferente color</div>

De manera que si solo escribes DIV, estarás haciendo referencia a todos los <div> que tengas en la página.

Y si colocaras CLASE, estarías haciendo referencia a todos los objetos con esa misma clase(<div class='CLASE'> o <Span class='CLASE'>).

Pero si escribes solo ID, estarás haciendo referencia a un único elemento, que debe tener esa ID(<div id='ID'> o <span id='ID'>).

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

8 comentarios !

1
Gabriel Scarred dijo...

ACA TE DEJO
http://gabomanson.blogspot.com MI BLOG.

PARA Q LO MIRES Y OPINES AVER Q TAL EL DISEÑO

2
Unknown dijo...

Hola!!

GABOMANSON, la verdad tiene estilo tu blog, verdaderamente.

3
Anónimo dijo...

oye we, no sabes donde esta el codigo del link "entradas atom".Esq le cambie de color a los links y ese link y el de abajo de pie de pagina se quedaron con otro color y no los puedo cambiar de color.O si sabes como quitarlos muhco mejor.thks
saludos

4
Unknown dijo...

Rulcaslez,mira lo que necesitas esta en la siguiente entrada: Cambiar el texto del feed

5
Anónimo dijo...

Me gustaría saber si hay alguna manera de cambiar el color de selección en las imágenes, es decir, el color de fondo y el color de la letra cambian, pero cuando selecciono una imagen se selecciona de color azul, quisiera saber como cambiar ese color

6
Unknown dijo...

Raul, aún no estoy enterado de que se pueda hacer eso en una página web. Pero podrías hacerlo con la configuración Apariencia de Windows.

7
Anónimo dijo...

Gracias de todos modos

8
Anónimo dijo...

muy bueno aporte sonrisa


Buscador de texto inter... Texto que crece so... Página Principal
Arriba