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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::selection
Supports the text-decoration property

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Véase también

  • pointer-events - controlar qué eventos están activos en el elemento