Wybór użytkownika - CSS-Tricks

user-selectNieruchomość w CSS kontroluje jak tekst w elemencie może być wybrany. Na przykład można go użyć, aby uniemożliwić wybór tekstu.

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

Jest to przydatne w sytuacjach, w których chcesz zapewnić użytkownikom łatwiejsze / bardziej przejrzyste środowisko kopiowania i wklejania (nie pozwalaj im przypadkowo wybierać bezużytecznych elementów, takich jak ikony lub obrazy). Jednak jest trochę wadliwy. Firefox narzuca fakt, że żaden tekst pasujący do tego selektora nie może zostać skopiowany. WebKit nadal umożliwia kopiowanie tekstu, jeśli zaznaczysz elementy wokół niego.

Możesz również użyć tego, aby wymusić wybór całego elementu:

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

Oto kilka ich demonstracji:

Zobacz demo wyboru użytkownika pióra autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Od dłuższego czasu nie było specyfikacji tej właściwości, ale teraz jest ona objęta zakresem modułu CSS Basic User Interface Module Level 4.

Wartość domyślna to auto, co powoduje, że wybór przebiega normalnie, zgodnie z oczekiwaniami. „Normalnie” jest trochę skomplikowane. Warto zacytować ze specyfikacji tutaj:

W przypadku pseudoelementów :: before i :: after obliczana jest wartość none

Jeśli element jest elementem edytowalnym , obliczona wartość tocontain

W przeciwnym razie, jeśli obliczona wartość wyboru użytkownika w elemencie nadrzędnym tego elementu to all, obliczona wartość toall

W przeciwnym razie, jeśli obliczona wartość wyboru użytkownika w elemencie nadrzędnym tego elementu to none, obliczona wartość tonone

W przeciwnym razie obliczona wartość to text

Innymi słowy, inteligentnie kaskaduje i resetuje do stanu sensu. Wygląda na to, że być może ta funkcja mogłaby zostać użyta do umożliwienia wyboru pseudoelementów, ale nie ma jeszcze ostatniego słowa.

Starsze / zastrzeżone

Firefox obsługuje -moz-none, co jest jak żaden, z wyjątkiem tego, że oznacza to, że podelementy mogą przesłonić kaskadę i stać się ponownie wybieralnymi -moz-user-select: text;w Firefoksie 21 -moz-none.

Internet Explorer obsługuje również dotychczas zastrzeżoną wartość, elementw której można zaznaczyć tekst wewnątrz elementu, ale zaznaczenie zatrzyma się na granicach tego elementu.

Więcej informacji

MDN Docs
Współdziałanie z wyborem użytkownika

Wsparcie przeglądarki

To jest specjalnie dla -*-user-select: none;

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.