CSS appearance Property

The appearance property allows you to control how the browser renders the native user interface of an element based on the operating system's theme.

selector { appearance: value; }
none Removes the default platform-native styling from the element entirely.
auto Allows the browser to use the default native styling based on the element type and operating system.
menulist-button Renders the element as a standard drop-down menu button.
textfield Renders the element using the native appearance of a single-line text input field.

Code Examples

A basic example showing how to strip the native checkbox appearance to create a custom square checkbox with a blue fill when checked.

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #333333;
  background-color: #ffffff;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: #007bff;
}

An advanced example using appearance: none on a select element with JavaScript to dynamically change its custom styles based on the user's selection.

<select id="theme-selector" style="appearance: none; padding: 10px; border: 2px solid #222222; background: #ffffff;">
  <option value="light">Light Mode</option>
  <option value="dark">Dark Mode</option>
</select>

<script>
const selectEl = document.getElementById("theme-selector");
selectEl.addEventListener("change", (e) => {
  if (e.target.value === "dark") {
    selectEl.style.backgroundColor = "#333333";
    selectEl.style.color = "#ffffff";
  } else {
    selectEl.style.backgroundColor = "#ffffff";
    selectEl.style.color = "#000000";
  }
});
</script>

Pro Tip

You can use appearance: none on a search input type to remove the default magnifying glass icon or the small "x" clear button that WebKit browsers inject automatically. This allows you to place your own custom icons exactly where you want them without the browser's default decorations crowding the input field.

Deep Dive

Think of appearance as the factory paint job on a car. By default, browsers use the operating system's specific style for things like buttons, checkboxes, and select menus. This makes a button on Windows look different than a button on macOS. When you set appearance to "none", you are effectively stripping that factory paint down to the raw metal. This gives you a blank canvas so your custom CSS can take over without the browser's default styles getting in the way or conflicting with your design. It is the first step in creating custom-designed form controls that look identical across every device.

Best Practices

Always use appearance: none when you plan to completely redesign a form element like a select box or checkbox. If you strip the native appearance, make sure you manually add back visual indicators for focus and hover states so the user knows the element is interactive. It is also wise to include the -webkit- prefix if you need to support older mobile browsers or legacy versions of Safari and Chrome.

Common Pitfalls

The most common headache occurs with select elements. When you set appearance to "none" on a select box, the native dropdown arrow usually disappears. You will need to add your own arrow back using a background image or a pseudo-element. Also, keep in mind that many non-standard values like searchfield or checkbox-container have been deprecated or behave inconsistently across browsers; stick to "none" and "auto" for the most reliable results.

Accessibility

If you remove the native appearance, you are now the person in charge of accessibility. Native elements come with built-in high-contrast support and focus rings. When you go custom, you must ensure your new design has enough color contrast and a very clear :focus style. If a user can't tell that a checkbox is checked because your custom graphics are too subtle, your UI has failed.

Dev Data Table: appearance property

default none
animatable no
inherited no
experimental no
year_intro 2004
year_standard 2020
js_syntax_1 element.style.appearance = "none";
js_syntax_2 element.style.setProperty("appearance", "none");
js_note When targeting this property in JavaScript, remember that older browsers might require the WebkitAppearance or MozAppearance camelCase variants.
browsers { "Chrome": 84, "Edge": 84, "Firefox": 80, "Safari": 15.4, "Opera": 70, "Chrome Android": 84, "Safari on iOS": 15.4, "Samsung Internet": 14, "Opera Mobile": 60 }
results render here...