CSS -webkit-appearance

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.

Code

Result

Here is a...

Button?

Syntax

The syntax for the -webkit-appearance property is:

-webkit-appearance: <value>

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

Example

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

Accepted Values

caps-lock-indicator (The indicator that appears in a password field when Caps Lock is active. Available in Safari 4.0 and later, and iOS 2.0 and later)

caret

checkbox

listbox

listitem

menulist

menulist-button

menulist-text

menulist-textfield

none

push-button

radio

scrollbarbutton-up (Unsupported in Safari 4.0)

scrollbarbutton-down (Unsupported in Safari 4.0)

scrollbarbutton-left (Unsupported in Safari 4.0)

scrollbarbutton-right (Unsupported in Safari 4.0)

scrollbartrack-horizontal (Unsupported in Safari 4.0)

scrollbartrack-vertical (Unsupported in Safari 4.0)

scrollbarthumb-horizontal (Unsupported in Safari 4.0)

scrollbarthumb-vertical (Unsupported in Safari 4.0)

scrollbargripper-horizontal (Unsupported in Safari 4.0)

scrollbargripper-vertical (Unsupported in Safari 4.0)

searchfield

searchfield-decoration

searchfield-results-decoration

searchfield-results-button

searchfield-cancel-button

slider-horizontal

slider-vertical

sliderthumb-horizontal

sliderthumb-vertical

square-button

textarea

textfield

Availability

The -webkit-appearance property is available in:

Safari 3.0 and later

iOS 1.0 and later

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.