CSS basic user interface

To view how basic user interface properties can alter the appearance of UI features, interact with the elements in this sample. Note that some features in this sample improve usability while others harm user experience.

<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;
}

The CSS outline and outline-offset properties were used to provide feedback to users which element currently has focus. An accent-color provides a theme color to all the form controls. The caret that appears when the text is edit has the same color thanks to the caret-color property. These can all be considered UI improvements.

Some features harm usability. The cursor property was used to change cursors from the browser default which is confusing. The resize property prevents the second <textarea> from being resizable while the pointer-events property prevents the third <textarea> from receiving click events. It is still focusable using the keyboard.

Click "Play" in the example above to see or edit the code for the animation in the MDN Playground.

• accent-color
• appearance

• caret, shorthand for:

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

• outline, shorthand for:

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

Learn forms: advanced form styling

Explains how appearance can be used to style form controls.

• CSS cursor property
• SVG cursor attribute
• CSS :focus, :focus-within, and :focus-visible pseudoclasses
• CaretPosition Interface

• Tips for Designing Useful and Usable Focus Indicators (2016)