Skip to content
Related Articles

Related Articles

Improve Article

CSS | -webkit-appearance

  • Last Updated : 19 Jun, 2020
Geek Week

The -webkit-appearance property 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
checkboxradiopush-buttonsquare-button
buttonbutton-bevellistboxlistitem
menulistmenulist-buttonmenulist-textmenulist-textfield
scrollbarbutton-upscrollbarbutton-downscrollbarbutton-leftscrollbarbutton-right
scrollbartrack-horizontalscrollbartrack-verticalscrollbarthumb-horizontalscrollbarthumb-vertical
scrollbargripper-horizontalscrollbargripper-verticalslider-horizontalslider-vertical
sliderthumb-horizontalsliderthumb-verticalcaretsearchfield
searchfield-decorationsearchfield-results-decorationsearchfield-results-buttonsearchfield-cancel-button
textfieldtextarea

Note: Few of the values are not supported in Safari 4.0
From above list some of property values 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: Below example illustrates the CSS -webkit-appearance property based on the 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;">
            GeeksforGeeeks
        </h1>
  
        <p>Webkit-Appearance Button of HTML H2 tag</p>
        <br>
  
        <h2>Welcome to GeeksforGeeeks</h2>
        <p>HTML Button tag</p>
  
        <br><br>
  
        <button>Welcome to GeeksforGeeeks</button>
    </center>
</body>
  
</html>

Output:

Example 2: Below example illustrate the CSS -webkit-appearance property based on the 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;">
             GeeksforGeeeks
        </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 :