CSS User Interface

Beyond cursors, which already have their own dedicated coverage in CSS Cursor, CSS has a handful of properties specifically aimed at controlling how form elements and interactive UI look and behave at the browser level.

In this page:

appearance: Removing Native Form Styling
accent-color: Quick Native Control Coloring
caret-color: The Text Cursor Blink
outline-offset: Spacing a Focus Ring
user-select: Controlling Text Selection

appearance: Removing Native Form Styling

Browsers apply their own native OS-level styling to form elements like checkboxes, radio buttons, and select dropdowns. The appearance property, usually set to none, strips this native styling away so you can apply fully custom CSS instead, which is the first step in building any custom-styled form control.

Example: appearance: Removing Native Form Styling

css

<style>
input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid gray;
}
</style>
<input type="checkbox">

accent-color: Quick Native Control Coloring

For cases where you do not need full custom control styling, accent-color lets you simply recolor a checkbox, radio button, range slider, or progress bar to match your brand while keeping the browser's native control shape and behavior — a much lighter-weight option than appearance: none.

Example: accent-color: Quick Native Control Coloring

css

<style>
input {
  accent-color: crimson;
}
</style>
<input type="checkbox" checked>
<input type="range">

caret-color: The Text Cursor Blink

caret-color changes the color of the blinking text-insertion cursor inside an input or textarea. This is a small but noticeable detail on dark-themed forms, where the default black caret can be nearly invisible against a dark background.

Example: caret-color: The Text Cursor Blink

css

<style>
input {
  background: #222;
  color: white;
  caret-color: lime;
}
</style>
<input type="text" value="Dark theme input">

outline-offset: Spacing a Focus Ring

outline-offset adds space between an element's edge and its outline (commonly a focus ring), pushing the ring outward instead of having it sit flush against the border. This is especially useful on rounded elements, where a flush outline would look cramped against the curve.

Example: outline-offset: Spacing a Focus Ring

css

<style>
button {
  border-radius: 50%;
  outline: 2px solid blue;
  outline-offset: 4px;
}
</style>
<button>Round</button>

user-select: Controlling Text Selection

user-select controls whether text inside an element can be selected/highlighted by the user at all. Setting it to none is common on UI chrome like button labels or drag handles, where accidental text selection during interaction looks broken, while normal content text should always leave it at its default auto value.

Example: user-select: Controlling Text Selection

css

<style>
.label {
  user-select: none;
}
</style>
<button class="label">Drag handle, not selectable</button>

🔒

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Will Change Next Lesson → CSS Print Styles