CSS -webkit-appearance
Last Updated :
08 Jun, 2023
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;" >
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.
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;" >
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...