user-select
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die user-select
CSS-Eigenschaft steuert, ob der Benutzer Text auswählen kann. Diese hat keine Auswirkungen auf Inhalte, die als Teil der Benutzeroberfläche eines Browsers geladen werden (sein Chrome), außer in Textfeldern.
Probieren Sie es aus
user-select: none;
user-select: text;
user-select: all;
<section id="default-example">
<p id="example-element">Try to select this text</p>
</section>
#example-element {
font-size: 1.5rem;
}
Syntax
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: revert-layer;
user-select: unset;
Hinweis: user-select
ist keine vererbte Eigenschaft, obwohl der anfängliche Wert auto
dazu führt, dass sie sich meistens wie vererbt verhält. WebKit/Chromium-basierte Browser implementieren die Eigenschaft als vererbt, was das im Standard beschriebene Verhalten verletzt und zu einigen Problemen führt. Bis jetzt hat sich Chromium entschieden, die Probleme zu beheben, um das endgültige Verhalten an die Spezifikationen anzupassen.
Werte
none
-
Der Text des Elements und seiner Unterelemente ist nicht auswählbar. Beachten Sie, dass das
Selection
-Objekt diese Elemente enthalten kann. auto
-
Der verwendete Wert von
auto
wird wie folgt bestimmt:- Bei den Pseudo-Elementen
::before
und::after
ist der verwendete Wertnone
. - Wenn der verwendete Wert von
user-select
beim Elternelement dieses Elementsnone
ist, ist der verwendete Wertnone
. - Andernfalls, wenn der verwendete Wert von
user-select
beim Elternelement dieses Elementsall
ist, ist der verwendete Wertall
. - Ansonsten ist der verwendete Wert
text
.
- Bei den Pseudo-Elementen
text
-
Der Text kann vom Benutzer ausgewählt werden.
all
-
Der Inhalt des Elements soll atomar ausgewählt werden: Wenn eine Auswahl einen Teil des Elements enthalten würde, muss die Auswahl das gesamte Element einschließlich aller Nachkommen enthalten. Wenn ein Doppelklick oder Kontextklick in Unterelementen aufgetreten ist, wird der höchste Vorfahre mit diesem Wert ausgewählt.
Hinweis:
Das CSS Basic User Interface-Modul definiert einen contain
-Wert für die user-select
-Eigenschaft, um die Auswahl zu ermöglichen, innerhalb des Elements zu beginnen, das durch die Grenzen dieses Elements eingeschlossen werden soll. Dies wird jedoch in keinem Browser unterstützt.
Formale Definition
Anfangswert | auto |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiele
HTML
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
CSS
.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}
.all {
-webkit-user-select: all;
user-select: all;
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Basic User Interface Module Level 4 # content-selection |
Browser-Kompatibilität
Siehe auch
::selection
Pseudo-Element- Das JavaScript
Selection
Objekt