CSS appearance Property

Description

The CSS appearance property is used to display elements with platform-specific styling, based on the operating system's theme. This can be useful for creating a consistent look and feel for your web application across different browsers and devices. The appearance property can be used on a variety of elements, including buttons, checkboxes, radio buttons, select boxes, and input fields. For example, you could use the appearance property to make a button look like a native operating system button, or to make a select box look like a native operating system select box.

Initial value: none
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: discrete
JavaScript syntax: object.style.appearance

Interactive Demo

appearance: none;

appearance: auto;

Syntax

appearance: none | auto | <compat-special> | <compat-auto>

Values

noneHides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded.
autoActs as none on elements with no special styling.
<compat-special>One of menulist-button or textfield. Both of these values are equivalent to auto on elements with no special styling.
<compat-auto>Possible values are button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, and textarea. Keywords which are the equivalent of auto for maintaining compatibility with older browsers.

Example

HTML

Checkboxes appearance none

<input type="checkbox" />

<input type="checkbox" checked />

<br><br>

Normal Select

<select>

  <option>default</option>

  <option>option 2</option>

</select>

<br><br>

Appearance - None

<select class="none">

  <option>appearance: none</option>

  <option>option 2</option>

</select>

CSS

input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

Result

Editor