1. Web
  2. CSS
  3. Reference
  4. Properties
  5. user-select

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

user-select CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die user-select CSS-Eigenschaft steuert, ob der Benutzer Text auswählen kann. Dies hat keinen Einfluss 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

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 Wert auto bewirkt, dass sie sich die meiste Zeit so verhält, als wäre sie vererbt. WebKit/Chromium-basierte Browser implementieren die Eigenschaft tatsächlich als vererbt, was das im Spezifikationsdokument beschriebene Verhalten verletzt, und dies kann einige Probleme verursachen. Bis jetzt hat sich Chromium entschlossen, die Probleme zu beheben, um das endgültige Verhalten mit den Spezifikationen in Einklang zu bringen.

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 Wert none
  • Wenn der verwendete Wert von user-select am übergeordneten Element dieses Elements none ist, ist der verwendete Wert none
  • Andernfalls, wenn der verwendete Wert von user-select am übergeordneten Element dieses 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 seiner Nachkommen enthalten. Wenn ein Doppelklick oder Rechtsklick in Unterelementen erfolgt, 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 zu ermöglichen, dass eine Auswahl innerhalb des Elements beginnt, um innerhalb der Grenzen dieses Elements enthalten zu sein. Dies wird jedoch von keinem Browser unterstützt.

Formale 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

Spezifikation
CSS Basic User Interface Module Level 4
# content-selection

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden