::selection
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
El pseudoelemento de CSS ::selection
aplica estilos a la parte de un documento que ha sido resaltada por el usuario (como hacer clic y arrastrar el ratón sobre el texto).
Pruébalo
Propiedades permitidas
Solo se pueden usar determinadas propiedades CSS con ::selection
:
color
background-color
text-decoration
y sus propiedades asociadastext-shadow
-webkit-text-stroke-color
,-webkit-text-fill-color
y-webkit-text-stroke-width
En particular, background-image
se ignora.
Sintaxis
::selection {
/* ... */
}
Ejemplos
HTML
Este texto tiene estilos especiales cuando lo resaltas.
<p>Prueba también a seleccionar este párrafo.</p>
CSS
/* Hacer que el texto seleccionado sea dorado sobre un fondo rojo */
::selection {
color: gold;
background-color: red;
}
/* Hacer que el texto seleccionado en un párrafo sea blanco sobre un fondo azul */
p::selection {
color: white;
background-color: blue;
}
Resultado
Preocupaciones de accesibilidad
No sobreescribas los estilos del texto seleccionado por razones puramente estéticas — los usuarios pueden personalizarlos para satisfacer sus necesidades. Para las personas que experimentan problemas cognitivos o que tienen menos conocimientos tecnológicos, los cambios inesperados en los estilos de selección pueden perjudicar su comprensión de la funcionalidad.
Si se sobreescribe, es importante asegurarse de que la relación de contraste entre el texto y los colores de fondo de la selección sea lo suficientemente alta como para que las personas con problemas de visión puedan leerla.
La relación de contraste de color se encuentra comparando la luminosidad del texto seleccionado y los colores de fondo del texto seleccionado. Para cumplir con las pautas de accesibilidad del contenido web (WCAG) actuales, el contenido del texto debe tener una relación de contraste de 4.5:1, o 3:1 para texto más largo como encabezados. (WCAG define texto grande entre 18.66px
y 24px
con negrita, o 24px
o superior).
Especificaciones
Specification |
---|
CSS Pseudo-Elements Module Level 4 # selectordef-selection |
Compatibilidad con navegadores
BCD tables only load in the browser
Véase también
pointer-events
- controlar qué eventos están activos en el elemento