Výběr uživatele - Triky CSS

user-selectVlastnost CSS určuje, jak se text v prvku nemá být vybrána. Lze jej například použít k tomu, aby byl text nevybratelný.

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

To je užitečné v situacích, kdy chcete uživatelům poskytnout jednodušší / čistší způsob kopírování a vkládání (neměli byste je náhodně vybírat zbytečné věci, jako jsou ikony nebo obrázky). Je to však trochu buggy. Firefox vynucuje skutečnost, že jakýkoli text odpovídající tomuto voliči nelze kopírovat. WebKit stále umožňuje kopírování textu, pokud vyberete prvky kolem něj.

Můžete to také použít k vynucení výběru celého prvku:

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

Zde je několik ukázek z nich:

Podívejte se na ukázku pera, kterou vybral uživatel Chris Coyier (@chriscoyier) na CodePen.

Už nějakou dobu nebyla pro tuto vlastnost žádná specifikace, ale nyní je zahrnuta v modulu CSS Basic User Interface Module Level 4.

Výchozí hodnota je auto, díky čemuž je výběr normální, jak očekáváte. „Normálně“ je trochu komplikované. Stojí za to citovat ze specifikace zde:

U pseudo prvků :: before a :: after je vypočítaná hodnota none

Pokud je prvek upravitelným prvkem , vypočítaná hodnota jecontain

Jinak, pokud je vypočítaná hodnota výběru uživatele na nadřazeném prvku tohoto prvku all, vypočítaná hodnota jeall

Jinak, pokud je vypočítaná hodnota výběru uživatele na nadřazeném prvku tohoto prvku none, vypočítaná hodnota jenone

Jinak je vypočítaná hodnota text

Jinými slovy, inteligentně kaskádovitě a resetuje do smyslného stavu. Vypadá to, že by tuto funkci bylo možné použít k tomu, aby bylo možné vybrat pseudo prvky, ale zatím žádné konečné slovo.

Starší / vlastní

Firefox podporuje -moz-none, což je jako žádný, kromě toho, že to znamená, že dílčí prvky mohou přepsat kaskádu a znovu je vybrat pomocí -moz-user-select: text;Od Firefoxu 21 se žádný nechová jako -moz-none.

Internet Explorer také podporuje dosud vlastnickou hodnotu, elementve které můžete vybrat text uvnitř prvku, ale výběr se zastaví na hranici tohoto prvku.

Více informací

Dokumenty MDN
Interoperabilita výběru uživatele

Podpora prohlížeče

To je speciálně pro -*-user-select: none;

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.