21

9

Personalizar el selector de texto

El selector ::selection de CSS3 nos permite cambiar el color del selector de texto (cuando selecionamos cualquier elemento de una página), que por defecto según el navegador varia (suele ser azul o naranja) y con esta función podemos cambiar parámetros del texto (como veremos en el ejemplo).
En este ejemplo solo se cambia el color del selector al seleccionarlo:

Como usarlo

Para implementar esta función simplemente debemos de usar el selector ::selection, y añadirle el estilo que queramos (pero solo cambia el formato del texto y el color del selector.
Este selector lo podemos usar para que actúe en toda la página o a un elemento en concreto. Nota: puede que sea necesario usar los prefijos -webkit- y -moz-.

1. /* Usando el selector sin un elemento que lo preceda afecta a toda la página */
   
2. ::selection{
   

background:#0C0;


3. }
   
5. /* Ahora solo efecta al elemento */
   
6. div.verde::selection{
   

background:#0C0;


7. }
   

Cambiar las propiedades del texto

No podemos cambiar muchas propiedades del texto, pero podemos cambiar el color y añadirle sombra.