selecciontexto

¿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 a todas las partes del documento (h2, p, divs…), solo tendremos que pegar este código CSS (Yo he usado uno propio, debéis cambiar el background y color al color que queráis. Usaremos la propiedad moz-selection en Firefox y ::selection en Safari:

::selection {
background: #28538a; /* Safari */
color: #fff;
}
::-moz-selection {
background: #28538a; /* Firefox */
color: #fff;

Esto mismo vamos a aplicarlos a los párrafos únicamente, sería así:

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