CSS appearance Property

The appearance property in CSS is used to control the appearance of form controls such as buttons, checkboxes, radio buttons, and others. It allows you to change the style of the native user interface controls, providing a consistent look and feel across different browsers and devices. In modern web development, appearance: none is the primary use case for customizing form controls, while other values are largely deprecated or non-standard.

The -webkit-appearance and -moz-appearance properties are proprietary vendor extensions used to apply platform-native styling based on the operating system's theme. They are not part of the official W3C CSS specification and are primarily supported by WebKit-based (Safari, Chrome) and Gecko-based (Firefox) browsers, respectively.

If this property is used on websites, it should be tested cautiously. The implementation of the appearance property can be quite different especially in older browsers. But in the newer browsers, there are only small differences.

Warning

Note that the "appearance" property is not supported by all browsers, and its behavior may vary depending on the browser and the operating system. Also, changing the appearance of form controls may affect the usability and accessibility of your website, so it's important to use it judiciously.

Initial Value	normal
Applies to	All elements.
Inherited	No.
Animatable	Yes.
Version	CSS3
DOM Syntax	object.style.appearance = "none";

When to use `appearance`

In practice, you reach for appearance in one situation: you want to fully restyle a form control and the browser's built-in look is getting in your way. Setting appearance: none strips the native rendering of an element such as a checkbox, radio button, <select> dropdown, or text input, leaving you a blank canvas to style with your own borders, colors, and pseudo-elements.

The trade-off is responsibility. Native controls come with focus rings, keyboard behavior, and platform conventions for free. Once you remove the native appearance you must rebuild the visual states (focus, checked, disabled) yourself, or the control becomes confusing and inaccessible. For that reason:

Use appearance: none when you genuinely need a custom-styled control and are prepared to handle its states and accessibility.
For a quick color tweak (the tick or fill color of a checkbox, radio, or range slider), prefer the accent-color property — it keeps native accessibility and is far less code.

Syntax

Syntax of CSS appearance Property

appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;

Note

Only none and auto are widely supported in modern browsers. The remaining values are largely obsolete or non-standard.

Example: a custom checkbox

The example below removes the native checkbox rendering with appearance: none and rebuilds it as a styled box that shows a checkmark when selected.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .custom-checkbox input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      .custom-checkbox input[type="checkbox"]:checked + label::before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        margin-right: 8px;
      }
    </style>
  </head>
  <body>
    <span class="custom-checkbox">
      <input type="checkbox" id="myCheckbox" name="myCheckbox" />
      <label for="myCheckbox">Checkbox</label>
    </span>
  </body>
</html>

Try it Yourself »

How it works:

appearance: none (with the -webkit- and -moz- prefixes for older browsers) removes the default checkbox rendering so we can style it ourselves.
The checkbox box gets a width and height of 20px, a 2px solid border, and a border-radius of 3px for rounded corners. Setting outline to none removes the default focus ring (in real code, replace it with your own visible focus style for accessibility).
When the checkbox is checked, the ::before pseudo-element on the adjacent <label> inserts the Unicode checkmark (\2714) inside a dark box, using a white text color so the tick stands out against the background-color.

Note

For simple color customization of form controls, modern CSS recommends using the accent-color property instead of appearance: none. It requires less code and maintains native accessibility features.

A very common use of appearance: none is to remove the default arrow and chrome from a <select> so you can add your own arrow with a background image and control the padding and border.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom select</title>
    <style>
      select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 8px 32px 8px 12px;
        border: 1px solid #888;
        border-radius: 6px;
        background-color: #fff;
        /* a small SVG chevron as the dropdown arrow */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path d="M2 4l4 4 4-4" stroke="%23333" fill="none" stroke-width="2"/></svg>');
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <select>
      <option>Choose a fruit</option>
      <option>Apple</option>
      <option>Banana</option>
      <option>Cherry</option>
    </select>
  </body>
</html>

Without appearance: none, the browser keeps its native dropdown arrow and you cannot reliably replace it. With it removed, the cursor and custom arrow are fully under your control.

Values

Note

Only none and auto are standard and widely supported. The remaining values are largely obsolete or non-standard in modern browsers.

Value	Description
none	Removes all platform-specific styling. Note: `normal` is the actual initial value, not `none`.
auto	User agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
icon	A small picture representing an object, often with a name or label.
window	A viewport, a framed surface used to present objects and content for user viewing and interaction.
button	A small object usually labeled with text that represents a user choice.
menu	A set of options for the user to choose from, perhaps more than one at a time. There are several specific types of menus.
field	An area provided for a user to enter or edit a value, typically using a keyboard. There are several special fields.
desktop	A window used to represent a system as a whole that often contains other windows.
workspace	A window used to represent a project or application that may contain other windows, typically with a title bar that shows the name of the project or application.
document	A window used to represent a user document, typically with a title bar that shows its name. May also be used to represent folders or directories in a file system.
tooltip	A window that is used to temporarily display information or help about an object. Also called "info" in the CSS2 system colors.
dialogue	A window used to present a notification or alternatives for the user to choose as part of an action taken by the user. Also called "message-box" in the CSS2 system fonts.
push-button	A button that has a border surrounding it, often beveled to appear three dimensional, as if it is raised. Also called "caption" in CSS2 system fonts.
hyperlink	A button that represents a hypertext link, often as simple as normal text that is underlined and perhaps colored differently.
radio-button	A button that displays whether or not it is checked with a small circle next to the button label. There may be a disc inside the circle when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with some other graphic in the circle.
checkbox	The element is drawn like a checkbox, including only the actual "checkbox" portion.
menu-item	A choice within a menu, which may also act as a label for a nested (hierarchical) menu.
tab	A button representing the label for a pane in a tabbed interface.
menubar	A menu of menus, typically arranged linearly, in a horizontal bar.
outline-tree	A menu where the options can be shown or hidden with small widgets, often represented by a small triangle or plus and minus signs.
range	A control that displays the current option, perhaps graphically and allows the user to select other options, perhaps by dragging a slider or turning a knob.
signature	A field for entering a signature.
password	A field for entering a password. Typically the text is rendered as a set of bullets or boxes to obscure the value.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.

outline — restore a visible focus indicator after stripping native styling.
border-radius — round the corners of your custom controls.
cursor — signal interactivity on restyled controls.
::before and content — inject checkmarks and icons into custom controls.
CSS3 properties — overview of the CSS3 feature set appearance belongs to.

Practice

What is the function of the CSS appearance property?

It is used to change the default system styling of form controls.It is used to change the background color of a page.It automates the form validation process.It provides a way to apply native styling based on the user's platform.It is used to create animations in CSS.

When to use appearance

Syntax

Example: a custom checkbox

Example: a custom select dropdown

Values

Related properties

Practice

When to use `appearance`