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. Dies hat keine Auswirkung auf Inhalte, die als Teil der Benutzeroberfläche eines Browsers geladen werden (sein Chrome), außer in Textfeldern.

Probieren Sie es aus

Syntax

css
/* 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;

Note: user-select ist keine vererbte Eigenschaft, obwohl der anfängliche auto-Wert sie meistens wie eine geerbte Eigenschaft verhalten lässt. WebKit/Chromium-basierte Browser implementieren die Eigenschaft als vererbt, was das im Standard beschriebene Verhalten verletzt und zu einigen Problemen führen wird. Bis jetzt hat Chromium beschlossen, 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:

  • Auf den ::before- und ::after-Pseudoelementen ist der verwendete Wert none
  • Wenn der verwendete Wert von user-select des übergeordneten Elements none ist, ist der verwendete Wert none
  • Andernfalls, wenn der verwendete Wert von user-select des übergeordneten Elements all ist, ist der verwendete Wert all
  • Andernfalls ist der verwendete Wert text
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 auftritt, wird der höchste Vorfahre mit diesem Wert ausgewählt.

Hinweis: Das Modul CSS basic user interface definiert einen contain-Wert für die user-select-Eigenschaft, um die Auswahl innerhalb des Elements zu starten und auf die Grenzen dieses Elements zu beschränken. Dies wird jedoch in keinem Browser unterstützt.

Formal Definition

Anfangswertauto
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

user-select = 
  auto     |
  text     |
  none     |
  contain  |
  all

Beispiele

HTML

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

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

BCD tables only load in the browser

Siehe auch