El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Cambiar el color del texto seleccionado en el navegador con CSS

Texto seleccionado en el navegador

Supongo que ya os habréis dado cuenta de que, cuando seleccionamos texto en una página web el color viene determinado por el navegador.

En algunos casos ese color, generalmente azul, que pone el navegador como fondo al texto seleccionado es o poco legible o simplemente desentona terriblemente con el sitio web.

Mediante CSS podremos controlar el color del texto seleccionado de nuestros sitios y, así, dar un toque más de refinamiento a nuestros diseños.

El código es tan sencillo como:


::selection {  /* Para Safari, Chrome, Konqueror, Opera etc.*/
     background: #006ab3;
     color: #fff;  }
::-moz-selection { /* Para Firefox, Flock, etc. */
     background: #006ab3;
      color: #fff;  }

Como seguro que habréis notado por el código, no funcionará en todos los navegadores. Más correctamente no funcionará en Internet Explorer ni nada basado en su motor, pero ya estamos acostumbrados a eso ¿Verdad?

Podéis comprobarlo en vivo seleccionando cualquier texto en el blog.

Vía Brenezl

CSS

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

11 Respuestas a “Cambiar el color del texto seleccionado en el navegador con CSS”

Agrega tu comentario

  1. Almorca dice:

    ::selection también funciona en Konqueror y en Opera 10 (no he probado con versiones inferiores).

  2. Steven dice:

    No lo conocia, muchas gracias. Voy a ver si lo implemento en mi blog.

  3. Gracias Almorca, lo suponía pero no quise colarme al no haberlo comprobado yo misma, ahora que ya lo sabemos seguro los añadiré para que se note que los buenos navegadores suelen funcionar como se espera de ellos ;)

  4. KOKOA-ESPOL dice:

    Somos un grupo de educadores y estudiantes  de la ESPOL interesados en promover en nuestra universidad y en la sociedad el uso y distribución del software libre. Con la firme convicción de que el software debe ser un recurso libre y accesible para todos, nuestra misión es dar a conocer al mundo sus beneficios incentivando su uso a nivel personal, académico y profesional a través de diferentes tipos de eventos. 
    <a href=”www.kokoa.espol.edu.ec”>kokoa</a>.

  5. Queli Coto dice:

    muy buen truco, nunca me había parado a pensar en cambiar eso, ni siquiera sabía que se podía, Gracias Alma

  6. m79 dice:

    buen recurso gracias, yo ya lo aplique en un sitio, pero tengo una duda:
    como puedo poner  textos con una clase <p> o <h1>,<h2>, etc. o en el body  y que  se vea como si estubiera seleccionado con fondo de color siempre ???

  7. Alkioneus dice:

    Muchas gracias Alma, no lo conocía.  Cualquier minimo detalle a personalizar con nuestro diseño es de agradecer.

    Te sigo leyendo.

  8. douglas dice:

    una pregunta un poco tonta, en nuestra plantilla en que parte de style.css debo agregar el codigo ?
    ya intente en varias partes y no me cambia :(
    gracias de antemano

  9. m79 dice:

    douglas yo puse el codigo antes de body y me funciono correctamente, lastima que a mi duda nadie me pueda dar una solucióna.

    acá va como lo puse yo:

    ::selection { /* Para Safari, Chrome, Konqueror, Opera etc.*/
    background: #CC0000;
    color: #FFFFFF; }
    ::-moz-selection { /* Para Firefox, Flock, etc. */
    background: #CC0000;
    color: #FFFFFF; }

    body {
    color: #999999;
    font-family: Arial;
    font-size: 11px;
    margin: 0px;
    padding: 0px;
    background-color: #000000;
    }

Trackbacks/Pingbacks

  1. [...] Alama nos explica como hacerlo, solo tenemos que añadir unas cuantas lineas a nuestra hoja de estilos. La única pega, como era de esperar, es que Internet Explorer no soporta estas órdenes así qué hará lo que quiera y seguirá mostrando las selecciones con su color por defecto. [...]

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 2 meses. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández