[Tips] CSS3–Cambiar el Color del texto seleccionado

Hola, este es un tip bastante simple y que nos puede ayudar a mejorar el look de nuestras páginas, y es que CSS3 nos permite cambiar el color por defecto del texto seleccionado de una manera muy sencilla.

Actualmente Firefox, Chrome, Opera, Safari y IE10 soportan esta funcionalidad, obviamente como sabemos , si la versión del browser no soporta esta característica, simplemente la ignora, la forma básica es la siguiente:

<style type="text/css">
   
::selection {
 
        background:#00ff21;
          color:#990000;
     }
    ::-webkit-selection {
          background:#00ff21;
          color:#990000;
     }

     ::-moz-selection {

          background:#00ff21;

          color:#990000;

     }

</style>

image

Como te puedes dar cuenta podemos cambiar el background y el color de la letra dentro del estilo.

Sin embargo también podemos definir por selector el color que queremos al seleccionar un texto:

<style type="text/css">
            p.verde::selection {
                background:#3e9d16;
                color:#fff;
            }
 
            p.verde::-moz-selection {
                background:#c2660d;
                color:#fff;
            }
            
            p.verde::-webkit-selection {
                background:#3e9d16;
                color:#fff;
            }
            
            p.negro::selection {
                background:#000;
                color:#fff;
            }
 
            p.negro::-moz-selection {
                background:#000;
                color:#fff;
            }
 
            p.negro::-webkit-selection {
                background:#000;
                color:#fff;
            }
   </style>

<p class="verde">

    
La primera parte se imprimió en Madrid, en casa de Juan de la Cuesta,

     a finales de 1604. 
</p>

<p class="negro">
   Salió a la venta en enero de 1605 con numerosas erratas, por culpa de la celeridad
que imponía el contrato de edición.
 </p>

image

Como vez, mega fácil, así que necesitas personalizar hasta el texto seleccionado aplicando un color distinto al por defecto, ya sabes que existe un estilo para ello.

Saludos!

@chalalo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *