CSS appearance Property


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
Applies to
all elements
Computed value
as specified
JavaScript syntax

Interactive Demo


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


  • 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.


Checkboxes appearance none
<input type="checkbox" />
<input type="checkbox" checked />
Normal Select
<option>option 2</option>
Appearance - None
<select class="none">
<option>appearance: none</option>
<option>option 2</option>
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;

Browser Support

The following table will show you the current browser support for the CSS appearance property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023