TheappearanceCSS property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.

Try it

appearance: auto;

appearance: none;

appearance: textfield;

<section>  <div>    <input type="search" value="search" aria-label="unlabeled search" />    <input type="checkbox" aria-label="unlabeled checkbox" />    <input type="radio" aria-label="unlabeled radio button" />    <button>Button</button>  </div></section>

input,button {  appearance: inherit;}

Syntax

/* CSS Basic User Interface Module Level 4 values */appearance: none;appearance: auto;appearance: menulist-button;appearance: textfield;appearance: base-select;/* Global values */appearance: inherit;appearance: initial;appearance: revert;appearance: revert-layer;appearance: unset;/* <compat-auto> values have the same effect as 'auto' */appearance: button;appearance: checkbox;

Values

Theappearance property can be applied to all elements and pseudo-elements, but the effect of the specified value, if any, depends on the element to which it is applied.

none

Gives the widget aprimitive appearance, making it stylable via CSS, while maintaining the widget's native functionality. This value does not affect non-widgets.

auto

Sets interactive widgets to render with theirOS-native appearance. Behaves asnone on elements with no OS-native styling.

base-select

Only relevant to the<select> element and::picker(select) pseudo-element, allowing them to be styled.

<compat-special>

Has an effect similar toauto on certain elements.

textfield

Causes the appearance of certain<input> types tomatch the appearance of thetext type.

menulist-button

When set on the<select> element, the drop-down picker's stylematches that of its default state.

<compat-auto>

Included for backwards compatibility; possible values includebutton,checkbox,listbox,menulist,meter,progress-bar,push-button,radio,searchfield,slider-horizontal,square-button, andtextarea. The values all behave asauto: useauto instead.

Non-standard values

Some non-standard values are also supported in some browsers:

slider-vertical

Makes the slider vertical when applied to<input type="range"> elements. Tocreate a vertical slider you should instead set thewriting-mode tovertical-lr and thedirection tortl.

-apple-pay-button

Displays the Apple Pay logo when set on a<button>,<a>, or<input> element of typebutton orreset.

Description

Theappearance property enables displaying elements in their OS-native style based on the operating system's theme, as well as the removal of any platform-native styling with thenone value. Settingappearance: none, or otherwise changing the appearance of UI widgets, does not change the element's functionality.

While most elements in a document can be fully styled by CSS, UI controls (widgets) are typically rendered by the browser using the operating system's native UI styles. Thisnative appearance differs between operating systems and browsers. In this default state, widgets have limited, if any, features that can be styled with CSS. Which elements have this native UI appearance is defined in HTML.

Theappearance property provides some control over the appearance of HTML widgets that, by default, look like native operating system controls. Most notably, thenone value suppresses some of a widget's native appearance. This results in aprimitive look that can be styled via CSS while still maintaining functionality and supporting native user interactions.

Some widgets disappear completely when set toappearance: none. The hidden controls are still interactive, however. For example, clicking on a<label> associated with anappearance: none checkbox will toggle the checkbox's checked state.

Becausenone can cause a widget to be hidden, thebase value is being added to provide widgets with a base appearance. When supported, thebase value will ensure widgets maintain their native appearance while enabling CSS to be used to change a widget's styles that are not changeable by default. Unlikenone, which can make radio buttons and checkboxes disappear,base gives the widget a primitive appearance with default native styles that are usable and interoperable, as well as enabling a good degree of customization via CSS. While thisbase value is not yet supported, the many<compat-auto> values provide similar functionality but are type-specific and not global.

Thebase-select value, which is relevant only to the<select> element and::picker(select) pseudo-element, enablesstyling<select> elements and the select picker (which contains the<option> elements). The picker is rendered in the top layer, similar to a popover. Whenbase-select is set, the picker can be positioned relative to the select (or other elements) usingCSS anchor positioning features. In addition, thebase-select value causes the<select> not to render outside the browser pane or to trigger built-in mobile operating system components. It is also no longer sized based on the width of the widest<option>.

Prefixed non-standard values

Before standardization, the prefixed-moz-appearance and-webkit-appearance properties allowed elements to be shown as widgets such as buttons or checkboxes. The following non-standard values may be encountered in legacy style sheets, most commonly as values of shadow DOM componentprefixed pseudo-elements.

Authors are encouraged to use only standard keywords.

Formal definition

Formal syntax

appearance =
none|
auto|
base|
base-select|
<compat-auto>|
<compat-special>|
base

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

<compat-special> =
textfield|
menulist-button

Examples

Basic example

This example demonstrates basic usage of theappearance property, altering the appearance of an<input> element in some browsers.

HTML

We include twonumber form controls along with their labels.

<p>  <label>Enter a number: <input type="number" min="0" max="10" /></label></p><p>  <label    >Enter a number: <input type="number" min="0" max="10"  /></label></p>

CSS

We set the element with the class oftext to look like a text field.

.text {  appearance: textfield;}

Results

Depending on the browser, the spinner may be visually removed when the control is set to look like a text field. Theappearance property has no effect on the functionality: for example, while there may no longer be a spinner to click on, the up and down cursor keys will still increment and decrement the value.

Appearance set tonone

The following example shows how to remove the default styling from a checkbox, a radio button, and a<select> element, and apply custom styling.

HTML

We include pairs of checkboxes, radio buttons, and<select> elements, along with their associated labels:

<label><input type="checkbox" /> Default unchecked </label><label><input type="checkbox" checked /> Default checked </label><hr /><label><input type="radio" name="radio" /> Default unchecked </label><label><input type="radio" name="radio" checked /> Default checked </label><hr /><label  >Unstyled select  <select>    <option>Option 1</option>    <option>Option 2</option>  </select></label><label  >Styled select  <select>    <option>Option 1</option>    <option>Option 2</option>  </select></label>

CSS

label {  display: block;  margin: 0.5em 0;}

We apply styles to both<input> elements of typecheckbox; these styles create a red square if the element is stylable. We setappearance: none on the:checked UI state for all inputs (checkbox andradio), as well as to elements with the.none class. This removes all the style of the radio button and checkbox, other than the margins, and allows any set styles to be applied. There are no alternative styles provided for the radio buttons or<select> elements for whennone is set.

[type="checkbox"] {  width: 1em;  height: 1em;  display: inline-block;  background: red;}input:checked,.none {  appearance: none;}

Result

Settingappearance: none enables UI elements to be styled, but it also runs the risk of hiding the widget. The unchecked checkbox, with itsappearance defaulting toauto, looks like a checkbox. Settingappearance: none in the:checked state enables it to be styled.

Like the unchecked checkbox, the unchecked radio button looks like the native UI widget, because it is. When in the checked state, withappearance: none applied, the radio button disappears; its functionality is retained, and only its margins affect page rendering.

Setting the appearance of a select

We can use theappearance property to opt-in to custom select functionality, enabling styling the<select> element and its picker, which represents the part of the form control that pops out of the page.

HTML

We include three<select> elements, with the same multiple<option> children. As with every<select>, we also include associated<label> elements. The third option has more text to demonstrate the effect ofbase-select on the width of the<select>:

<label for="ice-cream1"  >Default flavor:  <select>    <option>Asparagus</option>    <option>Dulce de leche</option>    <option>Pistachio, rum raisin, and coffee</option>  </select></label><label for="ice-cream2"  >Base select flavor:  <select>    <option>Asparagus</option>    <option>Dulce de leche</option>    <option>Pistachio, rum raisin, and coffee</option>  </select></label><label for="ice-cream3"  >Menulist button flavor:  <select>    <option>Asparagus</option>    <option>Dulce de leche</option>    <option>Pistachio, rum raisin, and coffee</option>  </select></label>

CSS

We select the pickers of all the<select> elements using the::picker() pseudo-element with theselect parameter. We set theappearance value of all the pickers and one<select> element tobase-select. We set the last<select> tomenulist-button. The first<select> defaults to theauto state:

.baseSelect,::picker(select) {  appearance: base-select;}.menulistButton {  appearance: menulist-button;}

label {  display: block;}

We set values for the<select> and pickers'background-color andborder properties to demonstrate the effects of theappearance values:

select {  border: 1px solid red;  background-color: orange;}::picker(select) {  background-color: yellow;  border: none;}

Results

While thebackground-color andborder styles are defined on all the<select> elements and their pickers, the::picker(select) styles only effect the picker where both the select and the picker have theappearance property set tobase-select. The first and third selects look the same becausemenulist-button is a compatibility keyword.

Notice that, by default, the inline-size of the<select> is generally the inline-size of the<option> with the most text, and that the drop-down picker appears over the top of the rendered page when opened, making it not constrained by the surrounding page and therefore fully visible. These statements are no longer true whenbase-select is set.

Specifications

Browser compatibility

See also

• prefers-color-scheme