No Login Data Private Local Save

CSS appearance Property Demo - Online Reset Native Styles

18
0
0
0

CSS appearance Property Demo

Compare native browser styles with appearance: none across form elements. See exactly what gets reset and learn how to build custom styles on top.

Browser Default Styles appearance: auto
<select>
<input type="text">
<input type="search">
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
70%
<meter>
65%
<button>
<textarea>
<input type="color">
<input type="file">
<input type="date">
Reset Styles appearance: none
<select>
Dropdown arrow disappears!
<input type="text">
Minimal visual change on most browsers
<input type="search">
Safari rounded corners & clear button removed
<input type="checkbox">
Checkmark invisible! Needs custom styling
<input type="radio">
Radio dot invisible! Needs custom styling
<input type="range">
Thumb handle style removed
<progress>
70%
Native progress fill style removed
<meter>
65%
Color-coded meter styling removed
<button>
Platform-specific button styling removed
<textarea>
Subtle resize handle changes on some browsers
<input type="color">
Color swatch border & shape changed
<input type="file">
"Choose file" button styling removed
<input type="date">
Calendar icon may disappear (varies by browser)
Best Practice: Custom Select Arrow After Reset

When you remove the native dropdown arrow with appearance: none, add a custom SVG background arrow to maintain usability.

Key properties:
• appearance: none
• background-image: url(...)
• background-position
• padding-right (space for arrow)
Single Element Reset
/* Reset a single select element */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Add custom arrow */
  background-image: url("arrow.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}
Full Form Reset
/* Reset all form elements */
input, select, textarea, button,
progress, meter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
}
Checkbox/Radio Fix
/* Checkbox/Radio need custom indicators */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background: #6c5ce7;
  border-color: #6c5ce7;
}
input[type="radio"] {
  border-radius: 50%;
}
Browser Support for appearance: none
Browser Standard appearance -webkit-appearance -moz-appearance Notes
Chrome 84+ Full Supported N/A Both standard and -webkit- work
Firefox 80+ Full N/A Supported Use -moz- for older versions
Safari 15.4+ Full Required N/A Always include -webkit- for Safari
Edge 84+ Full Supported N/A Chromium-based, same as Chrome
iOS Safari 15.4+ Partial Required N/A Always include -webkit- prefix
Recommendation: Always include both appearance: none and -webkit-appearance: none for maximum compatibility. Add -moz-appearance: none for older Firefox versions.
Frequently Asked Questions

The appearance property controls whether an element uses platform-native styling (browser default) or can be fully customized with CSS. It was originally introduced as a way to make elements look like native UI widgets (e.g., appearance: button makes a <div> look like a button). Today, its most common use is appearance: none to strip away all native browser styling, giving developers a clean slate for custom designs.

Key reasons:
  • Cross-browser consistency: Native form controls look completely different across Chrome, Firefox, and Safari. Resetting with appearance: none ensures a uniform starting point.
  • Custom design systems: When building a branded UI, native styles clash with your design. Reset them and build your own.
  • Removing unwanted native features: Safari adds rounded corners to search inputs; Firefox adds a special dropdown arrow to <select>. appearance: none removes these quirks.
  • Accessibility: Custom-styled controls can be made more accessible with proper ARIA attributes and focus states.

This is the most common gotcha! Checkboxes and radio buttons rely entirely on native OS-level rendering for their checkmarks and dots. When you apply appearance: none, the native indicator is removed, but no replacement is provided. The input still exists (it's clickable and maintains its checked state), but visually there's nothing there. You must manually style the :checked state using CSS pseudo-elements or background images to create custom indicators. See the Checkbox/Radio Fix code example above.

After appearance: none, the native dropdown arrow disappears. To add a custom arrow:
  1. Use an inline SVG as a background-image (data URI).
  2. Position it with background-position: right 0.75rem center.
  3. Add extra padding-right so the text doesn't overlap the arrow.
  4. Set background-repeat: no-repeat.

See the Best Practice example above for a working demonstration with complete CSS.

appearance: none specifically targets platform-native UI styling (the operating system's rendering of form controls). all: unset is much more aggressive—it resets every CSS property (color, font, margin, padding, border, etc.) to its inherited or initial value. Use appearance: none when you want to keep your existing styles but remove browser-specific chrome. Use all: unset (rarely) when you need a complete CSS reset on a specific element.

Range inputs are complex because they have separate pseudo-elements for the track and thumb:
  • Chrome/Safari: Use ::-webkit-slider-runnable-track and ::-webkit-slider-thumb.
  • Firefox: Use ::-moz-range-track and ::-moz-range-thumb.

Apply appearance: none to the <input type="range"> itself, then style the pseudo-elements separately. Note that you'll need vendor-prefixed pseudo-elements for each browser engine.

It can, if not handled carefully. Removing native styles also removes default focus indicators, which are critical for keyboard navigation. When using appearance: none, always:
  • Add a visible :focus-visible outline or ring.
  • Ensure custom controls have proper ARIA roles and labels.
  • Maintain sufficient color contrast on custom elements.
  • Test with screen readers and keyboard-only navigation.

The underlying HTML semantics remain intact, so screen readers still recognize checkboxes, buttons, and selects correctly—even with custom styling.

Yes! The appearance property accepts values like button, textfield, menulist-button, checkbox, radio, push-button, and more. For example, applying appearance: button to a <div> makes it render with native button styling. However, this usage is less common and somewhat inconsistent across browsers. The primary practical use today is appearance: none for resetting styles. If you need a button, just use a <button> element—it's semantically correct and accessible by default.
🔧 Related Tools