user-select
En esta página
| Clase | Propiedades CSS |
|---|---|
select-none |
user-select: none; |
select-text |
user-select: text; |
select-all |
user-select: all; |
select-auto |
user-select: auto; |
Examples#
Disabling text selection#
Use the select-none utility to prevent selecting text in an element and its children:
{
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:select-none] -->
<div class="select-none ...">The quick brown fox jumps over the lazy dog.</div>
Allowing text selection#
Use the select-text utility to allow selecting text in an element and its children:
{
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:select-text] -->
<div class="select-text ...">The quick brown fox jumps over the lazy dog.</div>
Selecting all text in one click#
Use the select-all utility to automatically select all the text in an element when a user clicks:
{
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:select-all] -->
<div class="select-all ...">The quick brown fox jumps over the lazy dog.</div>
Using auto select behavior#
Use the select-auto utility to use the default browser behavior for selecting text:
{
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:select-auto] -->
<div class="select-auto ...">The quick brown fox jumps over the lazy dog.</div>