Selectare utilizator - CSS-Tricks

user-selectProprietatea în CSS controlează modul în care textul într - un element este permis să fie selectat. De exemplu, poate fi folosit pentru a face textul neselectabil.

.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 */ )

Acest lucru este util în situațiile în care doriți să oferiți utilizatorilor o experiență de copiere-lipire mai ușoară / mai curată (să nu le faceți din greșeală să selecteze text lucruri inutile, cum ar fi pictograme sau imagini). Cu toate acestea, este un pic buggy. Firefox impune faptul că orice text care corespunde acelui selector nu poate fi copiat. WebKit permite în continuare copierea textului dacă selectați elemente din jurul acestuia.

Puteți utiliza, de asemenea, acest lucru pentru a impune selectarea unui întreg element:

.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 */ )

Iată câteva demonstrații despre acestea:

Vedeți demo-ul Pen-select de către Chris Coyier (@chriscoyier) pe CodePen.

Nu a existat nicio specificație pentru această proprietate pentru o vreme, dar acum este acoperită de modulul CSS Basic User Interface Module Level 4.

Valoarea implicită este auto, ceea ce face ca selecția să aibă loc în mod normal așa cum vă așteptați. „În mod normal” este un pic complicat. Merită citat din specificația de aici:

Pe pseudo-elementele :: before și :: after, valoarea calculată este none

Dacă elementul este un element editabil , valoarea calculată estecontain

În caz contrar, dacă valoarea calculată a selectării utilizatorului de pe părintele acestui element este all, valoarea calculată esteall

În caz contrar, dacă valoarea calculată a selectării utilizatorului de pe părintele acestui element este none, valoarea calculată estenone

În caz contrar, valoarea calculată este text

Cu alte cuvinte, cascade inteligent și se resetează la o stare senzorială. Se pare că această caracteristică ar putea fi utilizată pentru a face pseudoelemente selectabile, dar încă nu există un cuvânt final.

Mai vechi / proprietar

Firefox acceptă -moz-none, care este la fel ca niciunul, cu excepția faptului că înseamnă că subelementele pot suprascrie cascada și pot deveni din nou selectabile cu -moz-user-select: text;Firefox 21, niciunul nu se comportă așa -moz-none.

Internet Explorer acceptă, de asemenea, o valoare proprietară până acum element, în care puteți selecta text în interiorul elementului, dar selecția se va opri la limitele acelui element.

Mai multe informatii

Documente MDN
Interoperabilitate Selectare utilizator

Suport pentru browser

Aceasta este special pentru -*-user-select: none;

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.