CSS -webkit-appearance - GeeksforGeeks

03 Nov, 2021
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 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:
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 the 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:
bhaskargeeksforgeeks
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Making a div vertically scrollable using CSS
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript