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.
Syntax
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:
button
button-bevel
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.