CSS -webkit-appearance

The CSS -webkit-appearance property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls.

The CSS -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.

Although the -webkit-appearance property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.


The syntax for the -webkit-appearance property is:

-webkit-appearance: <value>

Where <value> represents the UI control that the element should resemble.

Example Code

Here's an example of usage (note that this example also includes other proprietary extensions):

-webkit-appearance: button; /* WebKit */
-moz-appearance: button; /* Mozilla */
-o-appearance: button; /* Opera */
-ms-appearance: button; /* Internet Explorer */
appearance: button; /* CSS3 */

Accepted Values

Here are the accepted values for the -webkit-appearance property:


The -webkit-appearance property is available in:

CSS3 Equivalent

The CSS3 equivalent to the -webkit-appearance property is the appearance property.

Browser Compatability

This property is a proprietary extension that is only supported in Chrome and Safari browsers. For maximum browser compatibility, you should add the W3C CSS3 equivalent to your code. This is typically done by removing the -webkit- prefix, however, you should always check the correct syntax before implementing your code (at the time of writing, CSS3 was still a work in progress).

Also consider adding other proprietary extensions such as -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. However, you should check that a corresponding extension exists before doing this, as not all browsers have corresponding extensions, and those that do may not necessarily accept the same parameters.