Appearance Property
Last updated: 2026-09-13
appearance Appearance Property
The appearance property controls whether an element uses the browser's native appearance — the default rendering of form controls. When set to none, the element drops its native look and its styling is fully controlled by CSS, making it a key property for customizing form controls.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
appearance: none | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | auto | Keyword | The native appearance |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| appearance | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： appearance: none is commonly used to customize <select>, <input type="checkbox">, and <input type="radio"> form controls.
Warning： For compatibility, also use the -webkit-appearance and -moz-appearance prefixes; browser support for appearance varies slightly.
❓ FAQ
QWhich native styles does appearance: none remove from controls?
AIt removes the native look browsers add to form controls: the dropdown arrow of select, the default check styles of checkbox/radio, the range slider track, the clear button of search inputs, and the spin buttons of number inputs. After removal the control's visuals are zeroed out and CSS takes over completely, but the functionality stays — clicking, selecting, and submitting all still work.
QCan the appearance property restore the default control look?
AYes — appearance: auto restores the browser's native rendering. But different browsers restore to slightly different degrees, and if you heavily customized with none before, subtle inconsistencies may remain after restoring. It is recommended to stick to the two values auto and none.
QThe select arrow is gone after appearance: none — how do I add a custom arrow?
AFill it in with a background image: after appearance: none removes the native arrow, set background: #fff url('arrow.svg') no-repeat right 12px center; and add padding-right to the select to leave room for the arrow. This is the classic custom-dropdown pattern — just keep a large enough click target.
QDo I need to write both appearance and -webkit-appearance prefixes?
AYes, it is recommended. -webkit-appearance covers Safari and older Chromium, -moz-appearance covers Firefox, and the standard appearance is for newer browsers. Firefox still requires -moz-appearance: none to take effect on checkboxes, so writing all three is the safest.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
