← Back to CSS Course | Chapter 9: Modern CSS Features | Lesson 17 of 25

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:

  1. appearance: Removing Native Form Styling
  2. accent-color: Quick Native Control Coloring
  3. caret-color: The Text Cursor Blink
  4. outline-offset: Spacing a Focus Ring
  5. user-select: Controlling Text Selection
Syntax
css 
selector {
  cursor: value;
  resize: value;
  user-select: none | text | all;
  outline: value;
}

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.

Note:
  • Accepted values:
  • auto — default, native look
  • none — strips native styling
  • textfield | menulist-button — compat values, act like auto or a specific look in some browsers
  • webkit-appearance: none — older WebKit prefix
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • auto — default, the browser's accent color
  • <color> — e.g. rebeccapurple
  • note: applies to checkbox, radio, range and progress
  • note: pairs with color-scheme for dark themes
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • auto — default, usually the current text color
  • <color> — e.g. tomato
  • transparent — hides the caret
  • currentcolor — same as the text color
  • note: applies to input, textarea and editable elements
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • outline-offset: 0 — default, outline touches the border edge
  • outline-offset: <length> — positive pushes the ring outward
  • outline-offset: -<length> — negative pulls it inside
  • note: outline does not affect layout
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • auto — default behavior
  • none — text cannot be selected
  • text — text can be selected
  • all — one click selects the whole element
  • contain — selection stays within the element
  • webkit-user-select — prefix still needed for Safari
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: user-select: Controlling Text Selection

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

CSS Will Change · CSS Print Styles · CSS Cursor · CSS Pagination (Print)

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using appearance: none and forgetting to add your own custom style, so the control disappears or looks broken.
  2. Using accent-color on elements that it does not support.
  3. Using user-select: none on text people might need to copy.
Browser Support

Most of these properties work in all modern browsers; accent-color is supported in Chrome 93+, Firefox 92+ and Safari 15.4+.

🔒

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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.