What Is the CSS Appearance Property and How to Use It

The CSS appearance property is specifically designed for form controls. Browsers typically render these controls with their own default styles.

HTML form controls are the components found within the form element that are used to gather user information.

By using appearance , you can decide if a form element should maintain its browser-specific styling or adopt a more tailored appearance.

After stripping away the default styles, using appearance: none, you have the freedom to apply your own CSS, allowing for a customized and uniform design across different browsers.

For example, a standard button usually has rounded corners, shadows, and other visual details added by the browser.

Example of using the appearance property on a button.

Here, the button loses its default appearance. From there, you are free to add your own colors, borders, spacing, and hover effects.

The property is most often used with form elements, including:

Buttons
Text fields
Checkboxes
Radio buttons
Select menus
Search inputs

For example, let’s imagine a couple of radio buttons:

Their default styles are defined by the browser.

Example of radio buttons rendered with the Firefox browser default styles. — The radio buttons, in this case, are rendered with the Firefox’s default styles.

Using appearance: none would make these default browser styles innactive:

Example of radio buttons rendered with no styles at all. — Here, radio buttons are rendered with no styles at all since appearance: none; is in use.

Now you can use your own styles that are consistent with the style of your website:

Code to style radio buttons using custom styles. — After setting appearance to none, we can style radio buttons as much as we want.

The result is now quite distinct:

Image showing how different radio buttons are when styled with custom code.

Use appearance to achieve consistency

A custom-styled element should look almost the same whether someone visits your website with Chrome, Firefox, or Safari.

Removing the browser’s default styling gives you much more control over the final result.

That said, the property should be used with care.

Native controls already include familiar styles and accessibility features that people expect.

If you remove those styles, it becomes your responsibility to provide clear focus states, readable colors, and controls that are easy to interact with using both a mouse and a keyboard.

Where to avoid using it

Avoid using it on ordinary elements like <div>, <section>, <article>, or <p>. Those elements don’t have a native browser appearance, so the property typically has little or no effect.

As a rule of thumb, if the element accepts user input or is an interactive control, appearance is likely to be relevant. Otherwise, you probably don’t need it.

Wrapping Up

The CSS appearance property allows developers to customize the native styling of user interface elements, specifically determining how these elements are rendered relative to each browser’s default styles.

This property is not something you will use on every element. Instead, think of it as a tool to customize form controls when the default browser styling does not match your website’s design.

Although my blog doesn’t support comments, feel free to reply via email or X.