CSS Benutzeroberfläche Basis

Um zu sehen, wie grundlegende Benutzeroberflächen-Eigenschaften 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 Benutzern Rückmeldung darüber zu geben, welches Element derzeit den Fokus hat. Eine accent-color bietet eine Thema-Farbe für alle Formularelemente. Der Karet, der erscheint, wenn der Text bearbeitet wird, hat dank der Eigenschaft caret-color die gleiche Farbe. Diese können alle als UI-Verbesserungen betrachtet werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die Eigenschaft cursor wurde verwendet, um die Cursor von der Standard-Einstellung des Browsers zu ändern, was verwirrend ist. Die Eigenschaft resize verhindert, dass das zweite <textarea> in der Größe verändert wird, während die Eigenschaft pointer-events verhindert, dass das dritte <textarea> Klickereignisse empfängt. Es kann immer noch mit der Tastatur fokussiert werden.

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

• accent-color
• appearance
• caret-color
• cursor
• outline, Kurzform für:
  • outline-color
  • outline-style
  • outline-width
• outline-offset
• pointer-events
• resize
• user-select

Formulare lernen: Fortgeschrittenes Form-Styling

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

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

• Tipps für das Design nützlicher und benutzbarer Fokus-Indikatoren (2016)