Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >user-select

user-select

user-select: auto | text | none | all

Steuert, ob und wie sich der Inhalt eines Elements mit der Maus oder dem Finger markieren lässt. Man setzt sie an Bedienelementen ein, wo das Markieren von Text beim schnellen Klicken stört, und an Code, der mit einem Klick ganz markiert werden soll.

Werte

  • auto – Standard: nach Element und Elternelement (gewöhnlicher Text lässt sich markieren).
  • text – der Text lässt sich markieren.
  • none – der Text lässt sich nicht markieren (weder das Element noch seine Nachfahren).
  • all – ein Klick markiert den ganzen Inhalt des Elements.

Initialwert: auto. Vererbt: nein. Gilt für: alle Elemente.

Beispiele

Buttons ohne Textmarkierung und Code, der ganz markiert wird (Safari braucht ein Präfix – beide Formen nacheinander):

<button class="plus">+</button>
<code class="code">npm install paket</code>

.plus {
  -webkit-user-select: none;
  user-select: none;
}
.code {
  -webkit-user-select: all;
  user-select: all;
}

Worauf Sie achten sollten

  • Safari unterstützt bisher nur die Form mit Präfix -webkit-user-select (Stand Oktober 2026); schreiben Sie beide.
  • Schalten Sie das Markieren nicht auf der ganzen Seite ab, „um den Inhalt zu schützen“ – das hält niemanden auf (der Text steht im HTML) und erschwert es Menschen, die Text kopieren oder vorlesen lassen.
  • Formularfelder (input, textarea) sind von none am Elternelement ausgenommen, ihr Text lässt sich weiter markieren.

Browserunterstützung

Noch nicht Baseline: funktioniert noch nicht in allen gängigen Browsern (ohne Präfix). Ab Version: Chrome 54, Firefox 69, Safari nur in der Vorschauversion. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
pointer-events
cursor
::selection