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 Eigenschaft hat keine Wirkung auf Inhalte, die als Teil der Benutzeroberfläche eines Browsers (seines chrome) geladen werden, 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

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;

Hinweis: user-select ist keine vererbte Eigenschaft, obwohl der anfängliche auto Wert sie meistens so verhalten lässt, als wäre sie vererbt. WebKit/Chromium-basierte Browser implementieren die Eigenschaft als vererbt, was das Verhalten gemäß der Spezifikation verletzt und einige Probleme verursachen wird. Bis jetzt hat Chromium entschieden, die Probleme zu beheben, um das finale Verhalten an die Spezifikationen anzugleichen.

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 Pseudo-Elementen ist der verwendete Wert none
Wenn der verwendete Wert von user-select auf dem übergeordneten Element none ist, ist der verwendete Wert none
Andernfalls, wenn der verwendete Wert von user-select auf dem übergeordneten Element 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 erfolgt, wird der höchste Vorfahre mit diesem Wert ausgewählt.

Hinweis: Das Modul der grundlegenden CSS-Benutzeroberfläche definiert einen contain Wert für die user-select Eigenschaft, um zu ermöglichen, dass die Auswahl innerhalb des Elements beginnt und durch die Grenzen dieses Elements eingeschlossen wird, jedoch wird dies in keinem Browser unterstützt.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	diskret

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

Siehe auch

::selection Pseudo-Element
Das JavaScript Selection Objekt

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden