English Português

texto-seleccionado.png

Las especificaciones para CSS3 traen consigo interesantes características, entre ellas, la posibilidad de modificar el color del texto cuando es seleccionado (por defecto azul) por medio del pseudo-elemento “selection“. Su forma de aplicación es sencilla, por ejemplo, para aplicarlo al texto de toda la página se tiene:

/* Para Safari */
::selection {
background: #ccc;
}

/* Para Firefox */
::-moz-selection {
background: #ccc;
}

Y claro, también se puede aplicar a selectores y clases, por ejemplo para el selector “p” usual en el cuerpo de la entradas:

p.post-body:selection {
background: #ccc;
}

p.post-body:-moz-selection {
background: #ccc;
}

Solo hay que tener en mente que las pseudo-clases, por ahora, solo son soportadas por los navegadores más modernos como firefox o safari.

demo | vía: css-tricks / intenta

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Diego Matias / Hace 9 años /

      Vou usar! Ótima dica, obrigado!

      Responder a Diego Matias →
    2. Luis / Hace 9 años /

      Muy buen truco, solo que tambien hay que tomar en cuenta, que algunos colores resaltan mucho y pueden ser hasta molestoso para el usuario..

      Saludos

      Responder a Luis →
    3. Tony / Hace 6 años /

      Safari, Firefox y…Chrome! 🙂
      Vi este efecto en la web de rtve.es, que tiene un agradable efecto de texto seleccionado (como un tenue resaltador de Office, pero sin lastimar los ojos jaja).
      Por supuesto, estás hablando de navegadores, y por ello, IE queda afuera… jajaja
      Gracias por la entrada y saludo!
      PD: los invito a visitar una web (en la URL)

      Responder a Tony →
    4. jhonky81 / Hace 5 años /

      brother mil gracias, q buen dataso me has dado, me ha servido muchisimo, mil gracias 🙂

      Responder a jhonky81 →
    5. Kari / Hace 3 años /

      Lo vi en una página y me gusto mucho. Es bueno saber que se puede modificar los pequeños detalles. Queda muy bonito.

      Responder a Kari →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad