¿Alguna vez te has preguntado porqué algunas web tienen el “don” de poder seleccionar el texto de manera distinta, es decir, con otro color? Pues es muy fácil, ¡aquí tienes la solución!

Para seleccionar el texto con el color que queramos, solo tendremos que pegar este código CSS. Usaremos la propiedad moz-selection en Firefox:

p {
	font-size: 1.5em;
	margin-bottom: 2.2em;
	}
	p.rojo::selection {
		background: #ffb7b7;
	}
	p.rojo::-moz-selection {
		background: #ffb7b7;
	}
	p.azul::selection {
		background: #a8d1ff;
	}
	p.azul::-moz-selection {
		background: #a8d1ff;
	}
	p.amarillo::selection {
		background: #fff2a8;
	}
	p.amarillo::-moz-selection {
		background: #fff2a8;
	}

Obviamente, los colores de selección del párrafo se pueden cambiar por lo que queramos.Después deberemos seguir esta estructura en nuestro documento HTML:

<p class="rojo">Texto de ejemplo.
 Si lo seleccionas, el texto seleccionado se muestra en rojo</p>
<p class="azul"> Texto de ejemplo.
 Si lo seleccionas, el texto seleccionado se muestra en azul</p>
<p class="amarillo">Texto de ejemplo.
Si lo seleccionas, el texto seleccionado se muestra en amarillo. </p>

Se puede ver un ejemplo en funcionamiento.

Vía | DavidWalsh

Compartir/Guardar