Grundlegende CSS-Benutzeroberfläche

Um zu sehen, wie die Eigenschaften der grundlegenden Benutzeroberfläche das Erscheinungsbild von UI-Funktionen verändern können, interagieren Sie mit den Elementen in diesem Beispiel. Beachten Sie, dass einige Funktionen in diesem Beispiel die Benutzerfreundlichkeit verbessern, während andere die Benutzererfahrung beeinträchtigen.

<div><span contenteditable>Edit this text </span></div>
<fieldset>
  <legend>Play with these fake form controls</legend>
  <input type="checkbox" id="check" />
  <input type="radio" name="a" />
  <input type="radio" name="a" />
  <input type="range" />
  <progress></progress>
</fieldset>
<fieldset>
  <legend>Be careful not to ruin usability: try resizing these.</legend>
  <textarea>
  cursor: wait;
  </textarea>
  <textarea>
  resize: none;
  </textarea>
  <textarea>
  pointer-events: none;
  </textarea>
</fieldset>

body {
  font-family: sans-serif;
  font-size: 1.25rem;
}
[contenteditable] {
  cursor: copy;
  caret-color: magenta;
  border: 1px solid #ccc;
}
:focus {
  outline: dashed magenta 3px;
  outline-offset: 10px;
}
* {
  accent-color: magenta;
}
div,
fieldset {
  margin: 20px;
}
textarea:nth-of-type(1) {
  cursor: wait;
}
textarea:nth-of-type(2) {
  resize: none;
}
textarea:nth-of-type(3) {
  pointer-events: none;
}

Die CSS-Eigenschaften outline und outline-offset wurden verwendet, um den Nutzern Rückmeldungen darüber zu geben, welches Element derzeit den Fokus hat. Ein accent-color bietet eine Themenfarbe für alle Formularelemente. Der Caret, der beim Bearbeiten von Text erscheint, hat dank der Eigenschaft caret-color die gleiche Farbe. Diese können alle als Verbesserungen der Benutzeroberfläche angesehen werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die Eigenschaft cursor wurde verwendet, um Cursorn von den Standard-Browser-Einstellungen zu ändern, was verwirrend ist. Die Eigenschaft resize verhindert, dass die zweite <textarea> resize-bar ist, während die Eigenschaft pointer-events verhindert, dass die dritte <textarea> Klickereignisse empfängt. Sie ist jedoch weiterhin per Tastatur fokussierbar.

Klicken Sie auf "Play" im obigen Beispiel, um den Code für die Animation im MDN Playground anzusehen oder zu bearbeiten.

• accent-color
• appearance

• caret, Kurzform für:

  • caret-color
  • caret-shape
• cursor
• nav-down
• nav-left
• nav-right
• nav-up

• outline, Kurzform für:

  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Lernen Sie Formulare: Fortgeschrittenes Formularstyling

Erklärt, wie appearance verwendet werden kann, um Formularelemente zu stylen.

• CSS-Eigenschaft cursor
• SVG-Attribut cursor
• CSS-Pseudoklassen :focus, :focus-within und :focus-visible
• CaretPosition-Schnittstelle

• Tipps zur Gestaltung nützlicher und benutzbarer Fokusindikatoren (2016)