Felhasználó kiválasztása - CSS-trükkök

A user-selectCSS tulajdonság vezérli, hogy miként engedélyezhető az elem szövegének kiválasztása. Például arra használható, hogy a szöveget ne lehessen kiválasztani.

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

Ez olyan helyzetekben hasznos, amikor könnyebb / tisztább másolási-beillesztési élményt kíván nyújtani a felhasználók számára (ne legyenek véletlenül szövegesen kiválasztott haszontalan dolgok, például ikonok vagy képek). Azonban egy kicsit hibás. A Firefox betartja azt a tényt, hogy az adott választónak megfelelő szöveg nem másolható. A WebKit továbbra is lehetővé teszi a szöveg másolását, ha elemeket jelöl ki a körülötte.

Ezt arra is felhasználhatja, hogy kikényszerítse, hogy egy teljes elem kapjon választást:

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

Íme néhány bemutató ezek közül:

Lásd Chris Coyier (@chriscoyier) Pen-user-select demóját a CodePen-en.

Jó ideig nem volt specifikáció erre a tulajdonságra, de most a CSS Basic felhasználói felület 4. szintű modulja foglalkozik vele.

Az alapértelmezett érték az auto, ami a kiválasztást a várakozásoknak megfelelően rendesen megtörténik. A „normálisan” kissé bonyolult. Itt érdemes idézni a specifikációból:

A pseudo elemek előtti és utáni :: számított érték a none

Ha az elem szerkeszthető elem , akkor a számított érték azcontain

Ellenkező esetben, ha az elem szülőjén a user-select allkiszámított értéke az, akkor a számított érték azall

Ellenkező esetben, ha az elem szülőjén a user-select nonekiszámított értéke az, akkor a számított érték aznone

Ellenkező esetben a számított érték az text

Más szavakkal, intelligens módon lépcsőzetes és visszaáll érzéki állapotba. Úgy tűnik, hogy talán ezt a funkciót lehetne használni az álelemek választhatóvá tételéhez, de még nincs végső szó.

Idősebb / saját tulajdonú

A Firefox támogatja -moz-none, ami semmihez sem hasonlítható, kivéve, hogy ez azt jelenti, hogy az alelemek felülbírálhatják a kaszkádot, és ismét választhatóvá válhatnak -moz-user-select: text;a Firefox 21 verziójával, egyik sem viselkedik hasonlóan -moz-none.

Az Internet Explorer egy eddig védett értéket is támogat element, amelyben kiválaszthatja a szöveget az elem belsejében, de a kijelölés az adott elem határainál megáll.

Több információ

MDN Docs
Felhasználó Válassza az interoperabilitást

Böngésző támogatás

Ez kifejezetten a -*-user-select: none;

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.