CSS user-select-Eigenschaft
Die user-select-Eigenschaft legt fest, ob der Benutzer Text auswählen kann oder nicht.
Der Standardwert ist "auto", der wie folgt bestimmt wird:
- Bei den Pseudo-Elementen ::before und ::after beträgt der berechnete Wert "none"
- Wenn das Element ein bearbeitbares Element ist, beträgt der berechnete Wert "contain",
- Wenn der berechnete Wert von user-select auf dem Elternelement dieses Elements "all" ist, beträgt der berechnete Wert "all".
- Wenn der berechnete Wert von user-select auf dem Elternelement dieses Elements "none" ist, beträgt der berechnete Wert "none",
- Andernfalls beträgt der berechnete Wert "text".
INFO
Vendor-Prefixe (-webkit-, -moz-) sind in allen modernen Browsern veraltet. Die Standard-Eigenschaft user-select wird vollständig ohne sie unterstützt.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente, obwohl einige Werte keine Auswirkung auf nicht-inline-Elemente 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 für die user-select-Eigenschaft mit dem Wert "auto":
CSS user-select-Codebeispiel
<!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 gegebenen Beispiel kann Text ausgewählt werden, wenn der Browser dies zulässt.
Beispiel für die user-select-Eigenschaft mit dem Wert "none":
CSS user-select-Beispiel-Prefixe
<!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 für die user-select-Eigenschaft mit dem Wert "all":
CSS user-select-Beispiel für den Wert "all"
<!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 irgendwo im Element wählt den gesamten Text darin aus.
Beispiel für die user-select-Eigenschaft mit dem Wert "text":
CSS user-select-Beispiel für den Wert "text"
<!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>Der Text kann vom Benutzer ganz normal ausgewählt werden.
Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| auto | Text kann ausgewählt werden, wenn der Browser dies zulässt. Dies ist der Standardwert dieser Eigenschaft. | Testen » |
| none | Text wird nicht ausgewählt. | Testen » |
| text | Text wird vom Benutzer ausgewählt. | Testen » |
| all | Text wird durch einen Klick ausgewählt. | Testen » |
| contain | Text kann ausgewählt werden, die Auswahl kann jedoch nicht über die Grenzen des Elements hinausgehen. Wird typischerweise für bearbeitbare Elemente verwendet. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Übungen
Welche Aussage ist bezüglich der CSS user-select-Eigenschaft korrekt?