PLAY CSS
jaen

Interaction

appearance

appearance sets whether form controls are drawn with the look the browser provides. With none, things like the arrow on a select disappear, so you can style it from scratch with CSS.

Syntaxnone | auto | <compat-auto> | <compat-special> …
none | auto | <compat-auto> | <compat-special>

<compat-auto> = searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button
<compat-special> = textfield | menulist-button

Preview

Favorite color
Presets
Drag the bottom-right corner to resize

Code

.box > :nth-child(2) {
  appearance: none;
}

Controls

appearancenone
appearance
Favorite color

About

Values

  • auto: draws controls such as buttons, selects and checkboxes with the look the browser provides. On elements that aren’t controls it is the same as none.
  • none: skips the control look and draws a plain CSS box.

The initial value is none, but the browser’s default styles set auto on controls, so they are normally drawn with auto. The preview sets it on the select (the second child). With none, the arrow on the right disappears.

When to use it

To give checkboxes or selects your own design, first remove what the browser draws with appearance: none, then add your own border, background and arrow image.

Watch out

  • The control still works with none: you can still pick options or check it, and keyboard use and screen readers are unchanged. But the arrow or check mark is gone, so add back a look that shows what kind of control it is.
  • With none, checkboxes and radio buttons in Chrome lose their border and size and become invisible. Give them a width, height and border, and style the :checked state too.
  • Values such as checkbox and menulist-button are left over from when each browser had its own version, and act almost like auto (textfield changes the look of search fields slightly, and menulist-button does the same for selects).
  • The spec also has base-select, which lets you rebuild a select down to its list of options (::picker(select)) with CSS. It works in Chrome and Edge 135 and Safari 27, but the syntax view on this page does not include it, so it is left out of the syntax and the preview (as is base, also in the spec).

References

MDN Web DocsappearanceSpecificationCSS Basic User Interface Module Level 4Can I useappearance

Comments

PLAY CSS