appearance
The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
Overview
The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 84 | 84 | 80 | 15.4 | 84 | 15.4 | |
auto | 83 | 83 | 80 | 15.4 | 83 | 15.4 |
button | 1 | 12 | 1 | 3 | 18 | 2 |
checkbox | 1 | 12 | 1 | 3 | 18 | 2 |
listbox | 1 | 12 | 1 | 3 | 18 | 2 |
menulist | 1 | 12 | 1 | 3 | 18 | 2 |
menulist-button | 1 | 12 | 80 | 3 | 18 | 1 |
meter | 1 | 12 | 1 | 3 | 18 | 2 |
none | 1 | 12 | 54 | 3 | 18 | 3 |
progress-bar | 1 | 12 | 1 | 3 | 18 | 2 |
radio | 1 | 12 | 1 | 3 | 18 | 2 |
searchfield | 1 | 12 | 1 | 3 | 18 | 2 |
textarea | 1 | 12 | 1 | 3 | 18 | 2 |
textfield | 1 | 12 | 1 | 3 | 18 | 1 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (64)
- Available with a vendor prefix: -moz- (1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (80)
Implementation note
- See bug 1481615.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (54)
Implementation note
- Doesn't work with `<input type="checkbox">` and `<input type="radio">`.
Syntax
CSS
/* Reset for select boxes */
select {
appearance: none;
background: white;
border: 1px solid #d1d5db;
border-radius: 6px;
padding: 8px 32px 8px 12px;
background-image: url('chevron-down.svg');
background-repeat: no-repeat;
background-position: right 8px center;
}
/* Customize checkboxes */
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #6b7280;
border-radius: 4px;
}
input[type="checkbox"]:checked {
background: #2563eb;
border-color: #2563eb;
}Live demo
Use cases
Using appearance
The appearance CSS property controls the appearance of form controls. Using appearance: none disables any default native appearance and allows the elements to be styled with CSS.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features