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

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 !

GABOMANSON dijo...

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

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

SäNTÿ dijo...

Hola!!

GABOMANSON, la verdad tiene estilo tu blog, verdaderamente.

Rulcaslez 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

SäNTÿ dijo...

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

Raul 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

SäNTÿ 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.

Raul dijo...

Gracias de todos modos

Anónimo dijo...

muy bueno aporte :)


Página Principal
Arriba