-webkit-appearance property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls.
-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.
-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:
<value> represents the UI control that the element should resemble.
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 */
Here are the accepted values for the
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)
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)
-webkit-appearance property is available in:
- Safari 3.0 and later
- iOS 1.0 and later
The CSS3 equivalent to the
-webkit-appearance property is the
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.