Kasutaja valitud - CSS-trikid | CSS-i almanahh 2025

user-selectVara CSS kontrollib, kuidas teksti element lastakse valida. Näiteks saab seda kasutada teksti valimatuks muutmiseks.

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

See on kasulik olukordades, kus soovite pakkuda kasutajatele hõlpsamat ja puhtamat copy-paste kasutuskogemust (mitte lasta neil kogemata teksti abil valida kasutud asjad, näiteks ikoonid või pildid). Kuid see on natuke lollakas. Firefox jõustab asjaolu, et sellele valikule vastavat teksti ei saa kopeerida. WebKit lubab ikkagi teksti kopeerida, kui valite selle ümber elemendid.

Seda saate kasutada ka sundimiseks, et kogu element saab valiku:

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

Siin on mõned demod nendest:

Vaadake CodePenilt Chris Coyieri (@chriscoyier) pliiatsi kasutaja valitud demot.

Selle vara kohta polnud pikka aega ühtegi spetsifikatsiooni, kuid nüüd on see hõlmatud CSS-i kasutajaliidese mooduli 4. tasemega.

Vaikeväärtus on auto, mis muudab valiku tavapäraseks, nagu te arvate. “Tavaliselt” on natuke keeruline. Siit tasub tsiteerida spetsifikatsioonist:

Pseudoelementide :: enne ja :: järel arvutatud väärtus on none

Kui element on muudetav element , on arvutatud väärtuscontain

Vastasel juhul, kui selle elemendi vanema kasutajavaliku arvutatud väärtus on all, on arvutatud väärtusall

Vastasel juhul, kui selle elemendi vanema kasutajavaliku arvutatud väärtus on none, on arvutatud väärtusnone

Vastasel juhul on arvutatud väärtus text

Teisisõnu, see kaskades arukalt ja taastub sensuaalsesse olekusse. Tundub, et võib-olla saaks seda funktsiooni kasutada pseudoelementide valimiseks, kuid lõplikku sõna pole veel.

Vanem / omandis olev

Firefox toetab -moz-none, mis on nagu ükski, välja arvatud see, et see tähendab, et alamelemendid võivad kaskaadi alistada ja muutuda -moz-user-select: text;Firefox 21-ga uuesti valitavaks , ükski ei käitu nagu -moz-none.

Internet Explorer toetab ka seni omandatud väärtust, elementmilles saate elemendi sees teksti valida, kuid valik peatub selle elemendi piiridel.

Rohkem informatsiooni

MDN-i dokumendid
Kasutaja Valige koostalitlusvõime

Brauseri tugi

See on mõeldud spetsiaalselt -*-user-select: none;

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.