Interactivity
appearance
Controlling the native appearance of UI controls.
Overview
| Class | Declarations |
|---|---|
appearance:none | appearance: none;
|
appearance:auto | appearance: auto;
|
appearance:menulist-button | appearance: menulist-button;
|
appearance:textfield | appearance: textfield;
|
appearance:button | appearance: button;
|
appearance:searchfield | appearance: searchfield;
|
appearance:textarea | appearance: textarea;
|
appearance:checkbox | appearance: checkbox;
|
appearance:menulist | appearance: menulist;
|
appearance:listbox | appearance: listbox;
|
appearance:meter | appearance: meter;
|
appearance:progress-bar | appearance: progress-bar;
|
appearance:<value> | appearance: <value>;
|
Examples
Remove default styling
Use appearance:none to remove the browser's native control styling before applying your own visual treatment.
<select class="appearance:none"> <option>Yes</option> <option>No</option></select>Generated CSS
@layer utilities { .appearance\:none { appearance: none }}Restore native appearance
Use appearance:auto when a variant should return to the platform control instead of the custom one.
<select class="appearance:none appearance:auto@sm"> <option>Native on larger screens</option></select>Keep semantics intact
appearance:none only changes rendering. Keep using the correct form element and accessible label.
<label> Sort <select class="appearance:none"> <option>Newest</option> </select></label>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<select class="appearance:none:hover appearance:auto@sm appearance:auto@print">...</select>