user-select
Pozwala zablokować lub ułatwić zaznaczanie tekstu przez użytkownika.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- wszystkie elementy
- JavaScript
element.style.userSelect = "none"
Przykład
#.install-command {
user-select: all;
-webkit-user-select: all;
}<p style="margin: 0 0 6px; color: #a3a3a3;">Kliknij raz, żeby zaznaczyć całe polecenie:</p>
<code style="display: block; padding: 8px 12px; border-radius: 8px; background: #111; user-select: all; -webkit-user-select: all;">npm create vite@latest moj-projekt</code>Definicja i zastosowanie
#Właściwość user-select określa, czy użytkownik może zaznaczyć tekst elementu. none blokuje zaznaczanie, all sprawia, że jedno kliknięcie zaznacza całą zawartość, a text wymusza możliwość zaznaczania.
user-select: none przydaje się w elementach interfejsu, w których przypadkowe zaznaczenie przeszkadza, na przykład w przyciskach klikanych wiele razy albo przeciąganych kartach. Wartość all świetnie sprawdza się w polach z kodem do skopiowania.
Safari wciąż wymaga wersji z przedrostkiem -webkit-user-select, więc warto pisać obie linie.
Składnia
#user-select: auto | text | none | all;Wartości
#Wartości w praktyce
#auto
.demo { user-select: auto; -webkit-user-select: auto; }none
.demo { user-select: none; -webkit-user-select: none; }all
.demo { user-select: all; -webkit-user-select: all; }Obsługa przeglądarek
#Ograniczona obsługa
Nie wszystkie przeglądarki to obsługują. Sprawdź obsługę, zanim użyjesz tego w produkcji.
Dobre praktyki
#- Nie blokuj zaznaczania w treści, którą ludzie mogą chcieć skopiować, na przykład w artykułach i kodzie.
- Dopisuj
-webkit-user-selectobokuser-select, żeby działało też w Safari.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.