Explora ::selection con controles para cambiar el color, el fondo, la decoración y la sombra del texto seleccionado por el usuario.
Selecciona cualquier fragmento dentro del bloque para ver cómo cambia el resaltado.
Seleccionar texto es una interacción nativa del navegador. ::selection permite personalizar el color de fondo, el color del texto, la decoración y la sombra aplicada al fragmento seleccionado.
Prueba a cambiar el alcance del selector: el modo global afecta a toda esta vista previa y el modo acotado solo al bloque editorial.
<p>Selecciona cualquier fragmento del artículo para revisar los estilos generados.</p>
<article class="selection-demo">
<h2>Resaltado de selección</h2>
<p>Este lab cambia los colores, la decoración y el brillo que aparecen cuando el usuario selecciona texto.</p>
<blockquote>Los estilos de selección acotados son útiles en bloques editoriales, notas, ejemplos y áreas de contenido de marca.</blockquote>
</article>.selection-demo::selection {
background-color: #c7d2fe;
color: #18122b;
text-decoration: underline;
text-shadow: 0 0 4px #7c3aed;
}