CSS user-select
La proprietà CSS3 user-select gestisce la selezionabilità del testo
La proprietà user-select è molto utile per impedire o forzare la selezione di testo in determinati elementi HTML. È spesso usata in interfacce utente dove non si vuole che l'utente evidenzi accidentalmente elementi, come pulsanti, menu o titoli.
Sintassi
Significato dei valori principali:
-
auto: comportamento predefinito del browser. Il testo può essere selezionato normalmente, secondo le regole del browser e del sistema operativo.
-
none: impedisce all’utente di selezionare il contenuto dell’elemento.
-
text: consente la selezione del testo all’interno dell’elemento, anche se il browser la bloccherebbe di default (utile in contenitori interattivi).
-
all: seleziona automaticamente tutto il contenuto quando l’utente effettua un clic singolo.
-
contain: impedisce la selezione che si estende fuori dall’elemento. Disponibile solo in alcuni browser.
Esempio proprietà: user-select
Codice Esempio: user-select
.selectable {
user-select: text;
background-color: #e0f7fa;
padding: 10px;
}.not-selectable {
user-select: none;
background-color: #ffe0e0;
padding: 10px;
}
Contenuto Esempio: user-select
Esempio di utilizzo di user-select
In questo esempio, il primo paragrafo è selezionabile, il secondo no:
CSS e HTML per l'esempio con user-select:
<style>
.selectable {
user-select: text;
background-color: #c6f2c9;
padding: 10px;
}
.not-selectable {
user-select: none;
background-color: #ffe0e0;
padding: 10px;
}
</style>
<div class="selectable">
Puoi selezionare questo testo.
</div>
<div class="not-selectable">
Non puoi selezionare questo testo.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
