Como decorar un texto seleccionado con el ratón

Como decorar un texto seleccionado con el ratón

Print Friendly, PDF & Email
Valora esta entrada

Cuando navegas por internet en algunas ocasiones algunas páginas web tienen el detalle de remarcar de algún modo el texto que estás seleccionando con el ratón.

¿Cuál es la instrucción css que lo hace posible?

La respuesta la encontramos en ::selection.

Veamos un ejemplo de uso de este pseudo-selector.

Ejemplo de uso de ::selection

Dado el siguiente documento web obtenemos el resultado de la imagen.

Fijaros que el selector escrito equivale a *::selection{}. En la práctica, cualquier etiqueta del documento que sea seleccionada.

Fijaros en el uso de dos veces dos puntos de acuerdo con las recomendaciones del w3c para diferenciar pseudo clases de pseudo elementos.

<!DOCTYPE html>
<html>
<head>
	<title>Selección de textos</title>
	<meta charset="utf-8"/>

	<style>
		::selection{
			color:#fff;
			background-color:#000;
		}

	</style>

</head>
<body>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore iusto reprehenderit repellat nihil, rem suscipit, ad alias qui in veritatis voluptate non! Maiores obcaecati, cumque beatae, quos ullam explicabo totam.</p>

</body>
</html>

De acuerdo con Mozilla únicamente algunas propiedades css pueden usarse con ::selection.

Estas son

  • color
  • background
  • background-color
  • text-shadow

Compatibilidad con navegadores

La propiedad ::selection no funciona para IOs Safari (iphone) ni para Opera mini.

Funciona a partir de la versión 9 de explorer.

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.