::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:

En particular, background-image se ignora.

Sintaxis

css
::selection {
  /* ... */
}

Ejemplos

HTML

html
Este texto tiene estilos especiales cuando lo resaltas.
<p>Prueba también a seleccionar este párrafo.</p>

CSS

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