CSS user-select Eigenschaft
Die CSS-Eigenschaft user-select steuert die Textauswahl. Werte und Beispiele werden erklärt.
Die CSS-Eigenschaft user-select steuert, ob der Benutzer Text mit der Maus, der Tastatur oder einem langen Tippen auf Touch-Geräten auswählen kann. Sie verändert nicht das Aussehen des Textes — sie beeinflusst nur das Auswahlverhalten.
Diese Seite erklärt, was jeder Wert bewirkt, wann man user-select einsetzt, welche Fallstricke es gibt und enthält ausführbare Beispiele, die bearbeitet werden können.
Wozu user-select verwenden
Text auszuwählen ist ein Standardverhalten des Browsers, daher lässt man es meistens unverändert. In einigen Situationen ändert man es gezielt:
- Versehentliche Auswahl verhindern bei UI-Steuerelementen — Schaltflächen, Tabs, Menüeinträge, Ziehgriffe. Wenn ein Benutzer auf eines davon doppelklickt oder darüber zieht, hebt der Browser die Beschriftung hervor, was fehlerhaft wirkt.
user-select: noneverhindert das. - Ein-Klick-Kopieren für kurze Zeichenketten wie Gutscheincodes, API-Schlüssel oder Befehle.
user-select: allwählt das gesamte Element mit einem einzigen Klick aus, sodass der Benutzer es sofort kopieren kann. - Auswahl wiederherstellen, wenn ein übergeordnetes Element sie deaktiviert hat, ein untergeordnetes Element (z. B. eine Adresse oder ein Code-Block) aber trotzdem auswählbar sein soll —
user-select: textam Kind-Element setzen.
Der Standardwert ist „auto", der wie folgt bestimmt wird:
- Bei den Pseudoelementen ::before und ::after ist der berechnete Wert „none"
- Wenn das Element ein bearbeitbares Element ist, ist der berechnete Wert „contain",
- Wenn der berechnete Wert von user-select am übergeordneten Element „all" ist, ist der berechnete Wert „all".
- Wenn der berechnete Wert von user-select am übergeordneten Element „none" ist, ist der berechnete Wert „none",
- Andernfalls ist der berechnete Wert „text".
Vendor-Präfixe (-webkit-, -moz-) sind in allen modernen Browsern mittlerweile veraltet. Die standardmäßige Eigenschaft user-select wird ohne diese Präfixe vollständig unterstützt.
| Anfangswert | auto |
|---|---|
| Anwendbar auf | Alle Elemente, wobei einige Werte bei Nicht-Inline-Elementen keine Wirkung haben. |
| Vererbbar | Nein. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.userSelect = "text"; |
Syntax
CSS user-select Werte
user-select: auto | none | text | all | contain | initial | inherit;Beispiel der user-select-Eigenschaft mit dem Wert „auto":
CSS user-select Code-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Im gezeigten Beispiel kann Text ausgewählt werden, wenn der Browser dies erlaubt.
Beispiel der user-select-Eigenschaft mit dem Wert „none":
CSS user-select Beispiel mit Präfixen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Der Text kann nicht ausgewählt werden.
Beispiel der user-select-Eigenschaft mit dem Wert „all":
CSS user-select all Wert Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Ein Klick an einer beliebigen Stelle im Element wählt den gesamten Text darin aus — praktisch für das Ein-Klick-Kopieren von Codes oder Befehlen.
Beispiel der user-select-Eigenschaft mit dem Wert „text":
CSS user-select text Wert Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Text kann vom Benutzer normal ausgewählt werden. Dieser Wert ist nützlich, um die Auswahl für ein einzelnes Kind-Element wieder zu aktivieren, wenn ein übergeordnetes Element user-select: none gesetzt hat.
Zu beachten
user-select: noneist kein Sicherheitsmerkmal. Es verhindert nur die einfache Maus-/Tastaturauswahl — der Text befindet sich weiterhin im DOM und ist über „Seitenquelltext anzeigen", Screenreader und in vielen Browsern auch über die Tastatur vollständig zugänglich. Verwenden Sie es niemals, um Inhalte zu „schützen".- Es deaktiviert das Kopieren nicht programmatisch oder per Rechtsklick → Kopieren in jedem Browser. Wenn das Kopieren wirklich verhindert werden soll, muss das
copy-Ereignis in JavaScript abgefangen werden — aber überlegen Sie gut, ob das sinnvoll ist. - Vererbt? Nein.
user-selectwird nicht im üblichen Sinne vererbt, aber sein berechneter Wert hängt vom übergeordneten Element ab (siehe die „auto"-Regeln oben), sodass das Setzen vonnoneauf einem Container seine Nachkommen effektiv beeinflusst. - Kombinieren Sie es durchdacht mit
pointer-events. Sie lösen unterschiedliche Probleme:user-selectsteuert die Textmarkierung, währendpointer-eventssteuert, ob ein Element überhaupt auf Maus-/Touch-Ereignisse reagiert.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Text kann ausgewählt werden, wenn der Browser es erlaubt. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| none | Text wird nicht ausgewählt. | Ausprobieren » |
| text | Text wird vom Benutzer ausgewählt. | Ausprobieren » |
| all | Text wird durch einen Klick ausgewählt. | Ausprobieren » |
| contain | Text kann ausgewählt werden, die Auswahl kann jedoch nicht über die Grenzen des Elements hinausgehen. Wird typischerweise für bearbeitbare Elemente verwendet. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Übung
Verwandte Eigenschaften
pointer-events— steuert, ob ein Element auf Maus- und Touch-Ereignisse reagiert.cursor— ändert den Mauszeiger, der über einem Element angezeigt wird.::beforeund::after— die Pseudoelemente, deren berechneteruser-select-Wert immernoneist.