Open In App

CSS -webkit-appearance

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 08 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads