CSS appearance Property

The appearance property is used to specify if native form controls should be displayed using platform-native styling based on the operating system’s theme or not. controls how native form controls are rendered.

The initial value of appearance property is auto. You can apply it to all elements. This property is not inheritable.

Syntax

This is the formal syntax for using appearance property —

appearance: none | auto

Here are some examples of using this property —

appearance: auto;
appearance: none;

Acceptable Values

none

In this case, no styling is applied on the element at all. You can style the element using your own CSS rules.

auto

The user-agent will render form controls with the default styles of the host operating system.

Browser Support

The CSS Appearance property is not fully supported by any browsers at present and partially supported in 89.77% browsers.

This property is partially supported in Edge 12+, Firefox 2+, Chrome 4+, Safari 4+, Opera 15+, iOS Safari 8+, Android 3+ and Chrome for Android 55+.

The browser stats and issues were taken from caniuse.com

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top