Interactividad
Utilidades para controlar si el usuario puede seleccionar texto en un elemento.
| Clase | Estilos |
|---|---|
select-none | user-select: none; |
select-text | user-select: text; |
select-all | user-select: all; |
select-auto | user-select: auto; |
Usa la utilidad select-none para evitar que se seleccione texto en un elemento y sus elementos hijos:
Intenta seleccionar el texto para ver el comportamiento esperado
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>Usa la utilidad select-text para permitir la selección de texto en un elemento y sus elementos hijos:
Intenta seleccionar el texto para ver el comportamiento esperado
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>Usa la utilidad select-all para seleccionar automáticamente todo el texto en un elemento cuando el usuario hace clic:
Intenta hacer clic en el texto para ver el comportamiento esperado
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>Usa la utilidad select-auto para usar el comportamiento predeterminado del navegador al seleccionar texto:
Intenta seleccionar el texto para ver el comportamiento esperado
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>Antepone a la utilidad user-select el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="select-none md:select-all ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.