user-select, resize & appearance

Zuletzt aktualisiert am 3. Juli 2026

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.

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

user-select

resize

appearance

Beispiele

user-select im Vergleich

.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-Snippet mit select-all

.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>

Resizable Container

.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 Checkbox mit appearance: none

.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-Handle mit user-select: none

.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

• 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

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.

Email-Kompatibilität

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.

Verwandte Eigenschaften