user-select, resize & appearance

Diese drei Properties geben dir Kontrolle über verschiedene Aspekte der Benutzerinteraktion: user-select bestimmt, ob und wie Text selektiert werden kann, resize erlaubt Nutzern das Ändern der Elementgröße, und appearance entfernt natives Browser-Styling von Formularelementen. Zusammen ermöglichen sie präzise Kontrolle über das Interaktionsverhalten deiner Oberfläche.

Steckbrief user-select

Syntax: user-select: auto | text | none | all | contain
Initialwert: auto
Vererbt: Nein
Animierbar: Nein

Kategorie: Interaktion
Werte: 13
Beispiele: 5
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.07.2026

Grundlagen

user-select kontrolliert, ob Nutzer Text in einem Element markieren können. Der Wert none verhindert Selektion (nützlich für UI-Elemente wie Buttons), all selektiert den gesamten Inhalt bei einem Klick (perfekt für Code-Snippets), und text erlaubt normale Textselektion.

resize macht Elemente größenveränderbar, ähnlich wie Textareas standardmäßig eine kleine Ecke zum Ziehen haben. Du kannst die Richtung kontrollieren (horizontal, vertikal oder beides) und Nutzern so erlauben, Elemente nach ihren Bedürfnissen anzupassen. Wichtig: Das Element braucht overflow (nicht visible), damit resize funktioniert.

appearance entfernt das native Browser-Styling von Formularelementen wie Checkboxen, Radio-Buttons oder Select-Dropdowns. Mit appearance: none kannst du diese Elemente komplett custom stylen, ohne dass das Standard-Styling dazwischenfunkt. Du bist dann aber selbst verantwortlich für alle States wie :focus, :checked oder :disabled.

Syntax & Werte

13 Werte

user-select

Wert	Beschreibung	Beispiel
`auto`	Standardverhalten: Text ist selektierbar (außer bei UI-Elementen wie Buttons)
`text`	Text kann selektiert werden (erzwingt Selektierbarkeit)
`none`	Text kann nicht selektiert werden
`all`	Der gesamte Inhalt wird bei einem Klick selektiert
`contain`	Selektion kann im Element starten, aber nicht darüber hinaus (bisher von keinem Browser unterstützt)

resize

Wert	Beschreibung	Beispiel
`none`	Element ist nicht größenveränderbar (Standard)
`both`	Element kann horizontal und vertikal verändert werden
`horizontal`	Element kann nur horizontal verändert werden
`vertical`	Element kann nur vertikal verändert werden
`block`	Element kann in Block-Richtung verändert werden (vertikal in horizontalen Sprachen)
`inline`	Element kann in Inline-Richtung verändert werden (horizontal in horizontalen Sprachen)

appearance

Wert	Beschreibung	Beispiel
`none`	Entfernt alle nativen Browser-Styles (für Custom-Styling)
`auto`	Standard Browser-Styling bleibt erhalten

Beispiele

5 Beispiele

Drei verschiedene user-select Werte

.select-none {
  user-select: none;
}

.select-all {
  user-select: all;
}

.select-text {
  user-select: text;
}

<div class="selection-demo">
<div class="selection-box select-none">
  <div class="label">user-select: none</div>
  Versuche, diesen Text zu markieren. Es funktioniert nicht!
</div>
<div class="selection-box select-all">
  <div class="label">user-select: all</div>
  Ein Klick irgendwo selektiert den gesamten Text.
</div>
<div class="selection-box select-text">
  <div class="label">user-select: text</div>
  Normales Selektionsverhalten: Markiere, was du willst.
</div>
</div>

Code-Block mit automatischer Komplett-Selektion

.code-snippet {
  font-family: 'Courier New', monospace;
  user-select: all;
}

.code-label {
  user-select: none;
}

<div class="code-container">
<div class="code-label">Klick um alles zu kopieren</div>
<pre class="code-snippet">npm install my-awesome-package
cd my-project && npm start</pre>
</div>

Container mit resize: both

.resize-container {
  resize: both;
  overflow: auto;
  min-width: 200px;
  min-height: 150px;
  max-width: 600px;
  max-height: 400px;
}

<div class="resize-container">
<div class="resize-hint">↘️ Ziehe an der rechten unteren Ecke</div>
<div class="resize-content">
  Dieser Container kann von dir vergrößert und verkleinert werden.
  Das ist besonders praktisch für Panels, Sidebars oder Textbereiche,
  die Nutzer an ihre Bedürfnisse anpassen möchten.
</div>
</div>

Custom-gestylte Checkbox ohne natives Styling

.custom-checkbox {
  appearance: none;
  width: 24px;
  height: 24px;
  border: 2px solid #cbd5e1;
  border-radius: 4px;
}

.custom-checkbox:checked {
  background: #1a56db;
  border-color: #1a56db;
}

.custom-checkbox:checked::after {
  content: '✓';
  color: white;
}

.custom-checkbox:focus-visible {
  outline: 2px solid #1a56db;
}

<label class="custom-checkbox-wrapper">
<input type="checkbox" class="custom-checkbox" checked>
<span class="checkbox-label">Ich akzeptiere die Nutzungsbedingungen</span>
</label>

Drag-Handles ohne störende Textselektion

.drag-handle {
  cursor: grab;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.item-content {
  user-select: text;
}

<ul class="draggable-list">
<li class="draggable-item">
  <span class="drag-handle">⋮⋮</span>
  <span class="item-content">Aufgabe 1: Code Review durchführen</span>
</li>
<li class="draggable-item">
  <span class="drag-handle">⋮⋮</span>
  <span class="item-content">Aufgabe 2: Tests schreiben</span>
</li>
<li class="draggable-item">
  <span class="drag-handle">⋮⋮</span>
  <span class="item-content">Aufgabe 3: Dokumentation aktualisieren</span>
</li>
</ul>

Barrierefreiheit

Verwende user-select: none niemals auf eigentlichem Inhalt wie Fließtext oder Überschriften. Nutzer müssen Text kopieren können. Die Property ist nur für UI-Elemente wie Buttons, Icons oder Drag-Handles gedacht. Screen Reader ignorieren user-select komplett, es betrifft nur die visuelle Selektion.

Deaktiviere resize nicht auf <textarea>-Elementen, außer du hast einen sehr guten Grund. Viele Nutzer verlassen sich darauf, das Textfeld an ihre Bedürfnisse anzupassen. Wenn du ein Custom-Resize-Pattern verwendest, stelle sicher dass es auch per Tastatur funktioniert.

Bei appearance: none bist du komplett selbst verantwortlich für alle Zustände: :focus-visible für Tastaturnavigation, :disabled für deaktivierte States, und :checked für Checkboxen/Radio-Buttons. Vergiss niemals den Focus Indicator. Er ist essentiell für Tastaturnutzer. Teste deine Custom-Formularelemente immer mit Screenreadern und nur per Tastatur.

Häufige Fehler

5 Punkte

user-select: none auf Paragraphen oder Artikeltext: Text muss immer kopierbar bleiben. Die Property ist nur für UI-Elemente wie Buttons oder Tabs gedacht.
resize ohne overflow: resize funktioniert nur, wenn das Element overflow: auto, hidden oder scroll hat. Mit dem Standard-Wert visible passiert nichts.
appearance: none ohne Custom-Styling: Wenn du das native Styling entfernst, musst du alle States selbst stylen: normal, hover, focus, disabled, checked. Sonst haben Nutzer keine visuelle Rückmeldung.
Focus Indicator nach appearance: none vergessen: Der native Focus Ring verschwindet mit dem Styling. Du brauchst unbedingt ein eigenes :focus-visible Styling, sonst ist das Element per Tastatur nicht nutzbar.
user-select: all auf mehrzeiligen Content: Bei langen Texten oder mehreren Absätzen ist select-all nervig. Die Property eignet sich nur für kurze Snippets wie Code, Telefonnummern oder Tracking-IDs.

Browser-Kompatibilität

5 von 5

user-select, resize und appearance werden von allen modernen Browsern unterstützt. Safari braucht für user-select weiterhin das Präfix -webkit-user-select. Der Wert contain wird bisher von keinem Browser unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett

user-select nur mit -webkit-Präfix
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

user-select, resize und appearance werden in E-Mail-Clients nicht unterstützt. Nutzer-Interaktionen wie Resizing oder Custom-Formularelemente existieren in E-Mails nicht.

Apple Mail

Keine

Nicht unterstützt
Gmail

Keine

Nicht unterstützt
Outlook

Keine

Nicht unterstützt
Yahoo Mail

Keine

Nicht unterstützt
Thunderbird

Keine

Nicht unterstützt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da