Gebruiker selecteren - CSS-trucs

De user-selecteigenschap in CSS bepaalt hoe de tekst in een element mag worden geselecteerd. Het kan bijvoorbeeld worden gebruikt om tekst niet selecteerbaar te maken.

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

Dit is handig in situaties waarin u gebruikers een gemakkelijkere / schonere kopieer- en plakervaring wilt bieden (laat ze niet per ongeluk tekst selecteren die nutteloze dingen, zoals pictogrammen of afbeeldingen, selecteert). Het is echter een beetje buggy. Firefox dwingt het feit af dat tekst die overeenkomt met die selector niet kan worden gekopieerd. Met WebKit kan de tekst nog steeds worden gekopieerd als u er elementen omheen selecteert.

U kunt dit ook gebruiken om af te dwingen dat een heel element wordt geselecteerd:

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

Hier zijn enkele demo's van:

Bekijk de demo voor het selecteren van de gebruiker door Chris Coyier (@chriscoyier) op CodePen.

Er was al een tijdje geen specificatie voor deze eigenschap, maar valt nu onder CSS Basic User Interface Module Level 4.

De standaardwaarde is auto, waardoor de selectie normaal verloopt zoals u verwacht. "Normaal" is een beetje ingewikkeld. Het is de moeite waard om hier uit de specificatie te citeren:

Op de :: before en :: after pseudo-elementen is de berekende waarde none

Als het element een bewerkbaar element is , is de berekende waardecontain

Anders, als de berekende waarde van user-select op de ouder van dit element is all, is de berekende waardeall

Anders, als de berekende waarde van user-select op de ouder van dit element is none, is de berekende waardenone

Anders is de berekende waarde text

Met andere woorden, het valt op intelligente wijze in een waterval en keert terug naar een zintuiglijke staat. Het lijkt erop dat deze functie misschien kan worden gebruikt om pseudo-elementen selecteerbaar te maken, maar er is nog geen laatste woord.

Ouder / eigendom

Firefox ondersteunt -moz-none, wat als geen ander is, behalve dat het betekent dat subelementen de cascade kunnen overschrijven en opnieuw selecteerbaar kunnen worden met -moz-user-select: text;Firefox 21, geen enkele gedraagt zich zo -moz-none.

Internet Explorer ondersteunt ook een tot nu toe beschermde waarde, elementwaarin u tekst binnen het element kunt selecteren, maar de selectie stopt bij de grenzen van dat element.

Meer informatie

MDN Docs
User Select interoperabiliteit

Browser-ondersteuning

Dit is specifiek voor -*-user-select: none;

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.