CSS -webkit-appearance
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:
Please Login to comment...