Proprietà CSS user-select
La proprietà CSS user-select definisce la selezione del testo. Scopri i valori della proprietà e prova gli esempi.
La proprietà CSS user-select controlla se l'utente può selezionare il testo con il mouse, la tastiera o una pressione prolungata su dispositivi touch. Non cambia l'aspetto del testo — influisce solo sul comportamento di selezione.
Questa pagina illustra cosa fa ciascun valore, quando conviene usare user-select, le insidie a cui prestare attenzione e degli esempi eseguibili che puoi modificare.
Perché usare user-select
Selezionare il testo è un comportamento predefinito del browser, quindi nella maggior parte dei casi non occorre modificarlo. Lo si cambia deliberatamente in alcune situazioni:
- Evitare selezioni accidentali sui controlli UI — pulsanti, schede, voci di menu, handle di trascinamento. Quando un utente fa doppio clic o trascina uno di questi elementi, il browser evidenzia l'etichetta, con un effetto visivamente indesiderato.
user-select: nonepreviene questo problema. - Copia con un clic per stringhe brevi come codici coupon, chiavi API o comandi.
user-select: allseleziona l'intero elemento con un singolo clic, così l'utente può copiarlo immediatamente. - Ripristinare la selezione quando un elemento padre l'ha disabilitata ma un figlio (ad esempio un indirizzo o un blocco di codice) deve comunque essere selezionabile — imposta
user-select: textsul figlio.
Il valore predefinito è "auto", determinato come segue:
- Sugli pseudo-elementi ::before e ::after, il valore calcolato è "none"
- Se l'elemento è un elemento modificabile, il valore calcolato è "contain",
- Se il valore calcolato di user-select sul genitore di questo elemento è "all", il valore calcolato è "all".
- Se il valore calcolato di user-select sul genitore di questo elemento è "none", il valore calcolato è "none",
- Altrimenti, il valore calcolato è "text".
I prefissi vendor (-webkit-, -moz-) sono ormai obsoleti in tutti i browser moderni. La proprietà standard user-select è completamente supportata senza di essi.
| Valore iniziale | auto |
|---|---|
| Si applica a | Tutti gli elementi, anche se alcuni valori non hanno effetto su elementi non inline. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.userSelect = "text"; |
Sintassi
Valori CSS user-select
user-select: auto | none | text | all | contain | initial | inherit;Esempio della proprietà user-select con il valore "auto":
Esempio di codice CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Nell'esempio fornito, il testo può essere selezionato se il browser lo consente.
Esempio della proprietà user-select con il valore "none":
Prefissi dell'esempio CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Il testo non può essere selezionato.
Esempio della proprietà user-select con il valore "all":
Esempio del valore all di CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Cliccando in qualsiasi punto dell'elemento si seleziona tutto il testo al suo interno — utile per la copia con un clic di codici o comandi.
Esempio della proprietà user-select con il valore "text":
Esempio del valore text di CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Il testo può essere selezionato normalmente dall'utente. Questo valore è utile per riabilitare la selezione su un singolo figlio quando un antenato ha impostato user-select: none.
Cose da tenere a mente
user-select: nonenon è una funzionalità di sicurezza. Blocca solo la selezione con mouse/tastiera — il testo è ancora nel DOM ed è completamente accessibile tramite "Visualizza sorgente", lettori di schermo e copia tramite tastiera in molti browser. Non usarlo mai per "proteggere" il contenuto.- Non disabilita la copia a livello di programmazione né tramite tasto destro → Copia in ogni browser. Se hai davvero bisogno di bloccare la copia, devi gestire l'evento
copyin JavaScript — ma valuta attentamente se farlo davvero. - Ereditato? No.
user-selectnon viene ereditato nel senso tradizionale, ma il suo valore calcolato dipende dal genitore (vedi le regole di "auto" sopra), quindi impostarenonesu un contenitore influenza effettivamente i suoi discendenti. - Usalo insieme a
pointer-eventscon attenzione. Risolvono problemi diversi:user-selectcontrolla l'evidenziazione del testo, mentrepointer-eventscontrolla se un elemento risponde agli eventi di mouse/touch.
Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Il testo può essere selezionato se il browser lo consente. Questo è il valore predefinito della proprietà. | Provalo » |
| none | Il testo non è selezionabile. | Provalo » |
| text | Il testo è selezionabile dall'utente. | Provalo » |
| all | Il testo viene selezionato con un clic. | Provalo » |
| contain | Il testo può essere selezionato, ma la selezione non può estendersi oltre i limiti dell'elemento. Tipicamente usato per elementi modificabili. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Esercitati
Proprietà correlate
pointer-events— controlla se un elemento reagisce agli eventi di mouse e touch.cursor— cambia il puntatore del mouse mostrato su un elemento.::beforee::after— gli pseudo-elementi il cui valore calcolato diuser-selectè semprenone.