Selezione utente - Trucchi CSS

La user-selectproprietà in CSS controlla come il testo in un elemento può essere selezionato. Ad esempio, può essere utilizzato per rendere il testo non selezionabile.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Ciò è utile in situazioni in cui si desidera fornire agli utenti un'esperienza di copia-incolla più semplice / pulita (non fare in modo che selezionino accidentalmente cose inutili, come icone o immagini). Tuttavia è un po 'buggato. Firefox impone il fatto che qualsiasi testo corrispondente a quel selettore non può essere copiato. WebKit consente comunque di copiare il testo se si selezionano elementi attorno ad esso.

Puoi anche usarlo per far sì che un intero elemento riceva la selezione:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Ecco alcune demo di quelle:

Guarda la demo della penna selezionata dall'utente di Chris Coyier (@chriscoyier) su CodePen.

Non c'erano specifiche per questa proprietà per un po 'di tempo, ma ora è trattata in CSS Basic User Interface Module Level 4.

Il valore predefinito è auto, che fa sì che la selezione avvenga normalmente come previsto. "Normalmente" è un po 'complicato. Vale la pena citare le specifiche qui:

Sugli pseudo elementi :: before e :: after, il valore calcolato è none

Se l'elemento è un elemento modificabile , il valore calcolato ècontain

Altrimenti, se il valore calcolato di user-select sul genitore di questo elemento è all, il valore calcolato èall

Altrimenti, se il valore calcolato di user-select sul genitore di questo elemento è none, il valore calcolato ènone

Altrimenti, il valore calcolato è text

In altre parole, casca in modo intelligente e si ripristina a uno stato sensoriale. Sembra che forse questa funzione potrebbe essere utilizzata per rendere selezionabili gli pseudo elementi, ma ancora nessuna parola finale.

Più vecchio / proprietario

Firefox supporta -moz-none, che è proprio come nessuno tranne che significa che i sottoelementi possono sovrascrivere la cascata e diventare nuovamente selezionabili con -moz-user-select: text;Firefox 21, nessuno si comporta come -moz-none.

Internet Explorer supporta anche un valore finora proprietario element, in cui è possibile selezionare il testo all'interno dell'elemento ma la selezione si fermerà ai limiti di quell'elemento.

Maggiori informazioni

Documenti MDN
Interoperabilità selezione utente

Supporto browser

Questo è specifico per -*-user-select: none;

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.