Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS -webkit-appearance

  • Last Updated : 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:

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 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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!