CSS -webkit-appearance
The -webkit-appearance property in CSS is used by WebKit-based browsers such as Safari. Note that Firefox and Edge also support -webkit-appearance, for compatibility for some reasons. Although, -webkit-appearance property is supported by some modern browsers but still there is a small difference.
Syntax:
element{ webkit-appearance:values; }
Parameters value: Some list of the -webkit-appearance property values are:
Values of this Property |
|||
---|---|---|---|
checkbox |
radio |
push-button |
square-button |
button |
button-bevel |
listbox |
listitem |
menulist |
menulist-button |
menulist-text |
menulist-textfield |
scrollbarbutton-up |
scrollbarbutton-down |
scrollbarbutton-left |
scrollbarbutton-right |
scrollbartrack-horizontal |
scrollbartrack-vertical |
scrollbarthumb-horizontal |
scrollbarthumb-vertical |
scrollbargripper-horizontal |
scrollbargripper-vertical |
slider-horizontal |
slider-vertical |
sliderthumb-horizontal |
sliderthumb-vertical |
caret |
searchfield |
searchfield-decoration |
searchfield-results-decoration |
searchfield-results-button |
searchfield-cancel-button |
textfield |
textarea |
|
|
Note: Few of the values are not supported in Safari 4.0.
From the above list, some property values are deprecated in modern browsers. CSS3 has equivalent appearance property to -webkit-appearance property based on the browser compatibility. Such as -webkit- is replaced by -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. The -webkit-appearance property also compatible to Safari 3.0 and iOS 1.0 and its later versions.
Example 1: The below example illustrates the CSS -webkit-appearance property based on different browser compatibility.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1" > < style > h2 { /* WebKit */ -webkit-appearance: button !important; /* Mozilla */ -moz-appearance: button; /* Opera */ -o-appearance: button; /* Internet Explorer */ -ms-appearance: button; /* CSS3 */ appearance: button; width: 400px; padding: 1em; color: #f00; } </ style > </ head > < body > < center > < h1 style = "color:green; padding:13px;" > w3wiki </ h1 > < p >Webkit-Appearance Button of HTML H2 tag</ p > < br > < h2 >Welcome to w3wiki</ h2 > < p >HTML Button tag</ p > < br > < br > < button >Welcome to w3wiki</ button > </ center > </ body > </ html > |
Output:
Example 2: The below example illustrates the CSS -webkit-appearance property based on browser compatibility.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width,initial-scale=1" > < style > #webkit { /* WebKit */ -webkit-appearance: slider-vertical !important; /* Mozilla */ -moz-appearance: slider-vertical; /* Opera */ -o-appearance: slider-vertical; /* Internet Explorer */ -ms-appearance: slider-vertical; /* CSS3 */ appearance: slider-vertical; } </ style > </ head > < body > < center > < h1 style = "color:green; padding:13px;" > w3wiki </ h1 > < p > Webkit-Appearance slider-vertical of HTML input[type=range] tag </ p > < br > < br > < input id = "webkit" type = "range" min = "0" max = "10" /> < br > < br > < p >Normal HTML input[type=range] tag</ p > < br > < br > < input type = "range" min = "0" max = "10" /> </ center > </ body > </ html > |
Output: