CSS appearance Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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