CSS Basis-Benutzeroberfläche

Basis-Benutzeroberfläche in Aktion

Um zu sehen, wie Basis-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 #cccccc;
}
: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 outline und outline-offset Eigenschaften wurden verwendet, um den Nutzern Rückmeldung darüber zu geben, welches Element derzeit den Fokus hat. Eine accent-color bietet eine Themenfarbe für alle Formularelemente. Der Caret, der beim Bearbeiten des Textes erscheint, hat dank der caret-color Eigenschaft dieselbe Farbe. Dies alles kann als Verbesserungen der Benutzeroberfläche angesehen werden.

Einige Funktionen beeinträchtigen die Benutzerfreundlichkeit. Die cursor Eigenschaft wurde verwendet, um Zeiger vom Standardwert des Browsers zu ändern, was verwirrend ist. Die resize Eigenschaft verhindert, dass das zweite <textarea> vergrößert und verkleinert werden kann, während die pointer-events Eigenschaft verhindert, dass das dritte <textarea> Klickereignisse empfängt. Es kann jedoch weiterhin über die Tastatur fokussiert werden.

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

Referenz

Eigenschaften

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

Das CSS Basis-Benutzeroberflächen-Modul definiert auch die caret, nav-down, nav-left, nav-right, und nav-up Eigenschaften. Derzeit unterstützen keine Browser diese Funktionen.

Leitfäden

Formulare lernen: Fortgeschrittene Formulargestaltung

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

Verwandte Konzepte

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

Spezifikationen

Siehe auch

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