Käyttäjän valitsema - CSS-temppuja

user-selectOmaisuus CSS ohjaa miten teksti elementti saa valita. Esimerkiksi sitä voidaan käyttää tekstin valitsemattomuuteen.

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

Tämä on hyödyllistä tilanteissa, joissa haluat tarjota helpomman / puhtaamman copy-paste-kokemuksen käyttäjille (älä anna heidän vahingossa valita tekstiä käyttämättömiä asioita, kuten kuvakkeita tai kuvia). Se on kuitenkin vähän buginen. Firefox pakottaa tosiasian, että mitään valitsinta vastaavaa tekstiä ei voida kopioida. WebKit sallii edelleen tekstin kopioinnin, jos valitset sen ympärille elementtejä.

Voit myös käyttää tätä pakottaaksesi, että koko elementti saa valinnan:

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

Tässä on joitain demoja näistä:

Katso Chris Coyierin (@chriscoyier) kynän käyttäjän valitsema esittely CodePenistä.

Tätä ominaisuutta ei ollut määritelty jonkin aikaa, mutta se kuuluu nyt CSS Basic User Interface Module Level 4 -moduuliin.

Oletusarvo on auto, mikä tekee valinnasta normaalin odotetusti. "Normaalisti" on vähän monimutkainen. On syytä lainata spesifikaatiosta täältä:

Pseudoelementtien :: ennen ja :: jälkeen laskettu arvo on none

Jos elementti on muokattava elementti , laskettu arvo oncontain

Muussa tapauksessa, jos käyttäjän valinnan laskettu arvo tämän elementin vanhemmassa on all, laskettu arvo onall

Muussa tapauksessa, jos käyttäjän valinnan laskettu arvo tämän elementin vanhemmassa on none, laskettu arvo onnone

Muussa tapauksessa laskettu arvo on text

Toisin sanoen, se kaskadesi älykkäästi ja palautuu aistilliseen tilaan. Näyttää siltä, että ehkä tätä ominaisuutta voitaisiin käyttää tekemään pseudoelementit valittaviksi, mutta ei vielä lopullista sanaa.

Vanhempi / oma

Firefox tukee -moz-none, mikä ei ole mikään, paitsi että se tarkoittaa, että alielementit voivat ohittaa kaskadin ja tulla valittaviksi uudelleen -moz-user-select: text;Firefox 21: stä alkaen, kukaan ei käyttäydy kuten -moz-none.

Internet Explorer tukee myös toistaiseksi omistettua arvoa, elementjossa voit valita tekstin elementin sisällä, mutta valinta pysähtyy kyseisen elementin rajoille.

Lisää tietoa

MDN-dokumentit
Käyttäjä Valitse yhteentoimivuus

Selaimen tuki

Tämä on erityisesti -*-user-select: none;

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.