Korisnik-odaberi - CSS-trikovi

user-selectNekretnina u CSS kontrolira kako je tekst u element ne smije biti odabran. Na primjer, pomoću njega se tekst ne može odabrati.

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

To je korisno u situacijama kada želite korisnicima pružiti jednostavnije / čišće iskustvo kopiranja i zalijepljenja (da im slučajno ne odaberu tekst beskorisne stvari, poput ikona ili slika). Međutim, malo je problem. Firefox provodi činjenicu da se bilo koji tekst koji se podudara s tim biračem ne može kopirati. WebKit i dalje omogućuje kopiranje teksta ako odaberete elemente oko njega.

To također možete koristiti da biste nametnuli da cijeli element dobije odabir:

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

Evo nekoliko demonstracija tih:

Pogledajte demo o odabiru korisnika olovke Chrisa Coyiera (@chriscoyier) na CodePenu.

Nije bilo specifikacije za ovo svojstvo već neko vrijeme, ali sada je obuhvaćeno modulom CSS Basic User Interface Level 4.

Zadana vrijednost je auto, što čini odabir uobičajenim kako očekujete. "Normalno" je pomalo komplicirano. Ovdje vrijedi citirati specifikaciju:

Na pseudo elementima :: before i :: after, izračunata vrijednost je none

Ako je element element koji se može uređivati , izračunata vrijednost jecontain

Inače, ako je izračunata vrijednost user-select na roditelju ovog elementa all, izračunata vrijednost jeall

Inače, ako je izračunata vrijednost user-select na roditelju ovog elementa none, izračunata vrijednost jenone

Inače, izračunata vrijednost je text

Drugim riječima, inteligentno se slaže i vraća u senzibilno stanje. Čini se da bi se možda ova značajka mogla koristiti za stvaranje pseudo elemenata koji se mogu odabrati, ali još nema konačne riječi.

Stariji / vlasnički

Firefox podržava -moz-none, što je baš kao nitko, osim što znači da podelementi mogu nadjačati kaskadu i ponovno postati izabrani s -moz-user-select: text;Firefoxom 21, niti jedan se ne ponaša kao -moz-none.

Internet Explorer također podržava zasad vlasničku vrijednost elementu kojoj možete odabrati tekst unutar elementa, ali odabir će se zaustaviti na granicama tog elementa.

Više informacija

MDN dokumenti
Korisnička interoperabilnost

Podrška preglednika

Ovo je posebno za -*-user-select: none;

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.