:: selección - Trucos CSS | Almanaque CSS 2024

Con el cursor, seleccione esta oración. ¿Observa cómo al seleccionar el texto, un color de fondo llena el espacio? Puede cambiar el color de fondo y el color del texto seleccionado aplicando estilo ::selection. Diseñar este pseudo elemento es ideal para hacer coincidir el texto seleccionado por el usuario con el esquema de color de su sitio.

p::-moz-selection ( color: red) p::selection ( color: red; )

Tenga en cuenta que los dos puntos dobles son necesarios en la sintaxis de este pseudo elemento, a pesar de que otros pseudo elementos aceptan dos puntos simples.

Como se vio arriba, puede ::selectiondiseñar elementos individuales. También puede aplicar estilo a toda la página colocando el pseudo elemento desnudo en su hoja de estilo.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Solo hay tres propiedades que ::selectionfuncionarán con:

color
background( background-color, background-image)
text-shadow

Vea las pruebas de selección Pen :: de Chris Coyier (@chriscoyier) en CodePen.

Si intenta ::selectionaplicar estilo con una propiedad que no está en la lista, esa propiedad se ignorará. Puede ser complicado ver backgrounden esa lista porque la propiedad solo representará un color cuando se use ::selectiony no representará una imagen de fondo o degradado.

Tampoco intente esto:

p::-moz-selection, p::selection ( color: red; )

Cuando los navegadores encuentran una parte de una selección que no entienden, la eliminan por completo, por lo que esto fallará todo el tiempo.

Uno de los usos más útiles para ::selectiones desactivar text-shadowdurante la selección. A text-shadowpuede chocar con el color de fondo de la selección y dificultar la lectura del texto. Configúrelo text-shadow: none;para que el texto sea claro y fácil de leer durante la selección.

Vea Pen :: selection text-shadow de Chris Coyier (@chriscoyier) en CodePen.

Fantasía :: selección

Junto con Sass, o cualquier otro preprocesador, puedes crear efectos realmente geniales con ::selection. Seleccione el texto en la demostración a continuación:

Puede notar que el efecto no es tan suave en algunos navegadores. Archivemos esa demostración en: cosas que son posibles, pero probablemente solo por diversión.

Otro pequeño truco tonto pero divertido es revelar una imagen a través del texto seleccionado.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.