appearance
Turns off the built-in look of form controls so they can be styled from scratch.
Syntax
appearance: none;Values
| Parameter | Type | Description |
|---|---|---|
| auto | keyword | The browser's standard look (the default). |
| none | keyword | No built-in look — only your styles. |
Examples
A checkbox drawn entirely with CSS:
<style>
.check {
appearance: none;
width: 20px; height: 20px;
border: 2px solid teal;
border-radius: 4px;
vertical-align: middle;
}
.check:checked { background: teal; }
</style>
<label><input type="checkbox" class="check" checked> A custom checkbox</label>Notes
After appearance: none you are responsible for every state: checked, focus, disabled. If you only need to change the color, accent-color is much simpler.
See also
- accent-color — The accent color of built-in form controls: checkboxes, radio buttons, sliders and progress bars.
- :checked — Matches a checked checkbox or radio button, and a selected `<option>`.
- <select> — A drop-down list of options.
Related recipes
In the tutorial
- Styling forms — How to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.