Потребител-изберете - CSS-трикове

В user-selectимота в CSS контролира колко е позволено текста в един елемент, за да бъде избран. Например, той може да се използва, за да направи текста неизбираем.

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

Това е полезно в ситуации, в които искате да предоставите на потребителите по-лесно / по-чисто копиране и поставяне (да не им се налага случайно да избират текст, безполезни неща, като икони или изображения). Въпреки това е малко бъги. Firefox налага факта, че всеки текст, съответстващ на този селектор, не може да бъде копиран. WebKit все още позволява копирането на текста, ако изберете елементи около него.

Можете също да използвате това, за да наложите, че цял елемент получава селекция:

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

Ето някои демонстрации на тези:

Вижте демонстрацията за избор на потребител на Pen от Chris Coyier (@chriscoyier) на CodePen.

От доста време няма спецификации за това свойство, но сега е обхванато от CSS Basic User Interface Module Level 4.

Стойността по подразбиране е auto, което прави изборът да се извършва нормално, както очаквате. „Обикновено“ е малко сложно. Тук си струва да цитирате спецификациите:

На псевдоелементите :: before и :: after изчислената стойност е none

Ако елементът е редактируем елемент , изчислената стойност еcontain

В противен случай, ако изчислената стойност на user-select на родителя на този елемент е all, изчислената стойност еall

В противен случай, ако изчислената стойност на user-select на родителя на този елемент е none, изчислената стойност еnone

В противен случай изчислената стойност е text

С други думи, той интелигентно каскадира и се връща в сензитивно състояние. Изглежда може би тази функция може да се използва, за да направи псевдоелементите избираеми, но все още няма последна дума.

По-стари / собственост

Firefox поддържа -moz-none, което е точно като никоя, с изключение на това, че означава, че поделементите могат да отменят каскадата и да станат отново избираеми с -moz-user-select: text;Firefox 21, никой не се държи като -moz-none.

Internet Explorer също поддържа собствена стойност досега element, в която можете да изберете текст вътре в елемента, но изборът ще спре до границите на този елемент.

Повече информация

MDN Документи
Потребителска оперативна съвместимост

Поддръжка на браузър

Това е специално за -*-user-select: none;

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.