Användarvälj - CSS-tricks | CSS Almanack 2025

Den user-selectegendom i CSS styr hur texten i ett element får väljas. Det kan till exempel användas för att göra text omöjlig att välja.

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

Detta är användbart i situationer där du vill ge en enklare / renare kopierings- och kopieringsupplevelse för användarna (låt dem inte av misstag text välja onödiga saker, som ikoner eller bilder). Men det är lite buggy. Firefox verkställer det faktum att all text som matchar den väljaren inte kan kopieras. WebKit gör det fortfarande möjligt att kopiera texten om du väljer element runt den.

Du kan också använda detta för att genomdriva att ett helt element får val:

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

Här är några demos av dem:

Se den användarväljande demo från Chris Coyier (@chriscoyier) på CodePen.

Det fanns inget spec för den här egenskapen på ett tag, men omfattas nu av CSS Basic User Interface Module Level 4.

Standardvärdet är autovilket gör att valet sker normalt som du förväntar dig. "Normalt" är lite komplicerat. Det är värt att citera från specifikationen här:

På :: före och :: efter pseudoelement är det beräknade värdet none

Om elementet är ett redigerbart element är det beräknade värdetcontain

Annars, om det beräknade värdet av användar välja på förälder till detta element är all, är det beräknade värdetall

Annars, om det beräknade värdet av användar välja på förälder till detta element är none, är det beräknade värdetnone

I annat fall är det beräknade värdet text

Med andra ord, det kaskaderar intelligent och återställs till ett sensiskt tillstånd. Det verkar som om den här funktionen kan användas för att göra pseudoelement valbara, men inget slutord än.

Äldre / proprietär

Firefox stöder -moz-none, vilket är precis som inget förutom att det betyder att delelement kan åsidosätta kaskaden och bli valbara igen med -moz-user-select: text;Från och med Firefox 21 fungerar ingen som -moz-none.

Internet Explorer stöder också ett hittills proprietärt värde element, där du kan välja text inuti elementet men markeringen kommer att stoppa vid gränsen för det elementet.

Mer information

MDN-dokument
Användarval interoperabilitet

Webbläsarstöd

Detta är speciellt för -*-user-select: none;

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.