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.
<!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;" >
GeeksforGeeks
</ h1 >
< p >Webkit-Appearance Button of HTML H2 tag</ p >
< br >
< h2 >Welcome to GeeksforGeeks</ h2 >
< p >HTML Button tag</ p >
< br >
< br >
< button >Welcome to GeeksforGeeks</ button >
</ center >
</ body >
</ html >
|
Output:
Example 2: The below example illustrates the CSS -webkit-appearance property based on browser compatibility.
<!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;" >
GeeksforGeeks
</ 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: