Introduction to CSS Appearance
The CSS appearance property allows website developers to emulate native user interface (UI) controls to alter the appearance of HTML elements. Many Web developers insert browser-specific properties for optimum browser compatibility by using extensions such as -webkit- for Safari, Google Chrome, and Opera for newer versions, -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera and so on. Like with any CSS property, this will simply disregard if a browser doesn’t really support a proprietary extension.
The appearance property presents an element with a platform-native styling focuses on the concept of the user’s operating system. One point to consider here that, the appearance property has been dropped from the CSS 3 standard. This is still mentioned in the CSS Basic User Interface Level 4 Module (author’s Draft as of November 2016), however, and could be reinterpreted in the future.
Syntax and Parameters
The syntax for appearance property can be written as shown below:
appearance: value;
For instance.
appearance: button;
Here, an element is plotted like a button.
For instance,
div {
-moz-appearance:button; /* This is for Mozilla Firefox browser*/
-webkit-appearance:button; /* This is for Safari and Chrome browsers*/
appearance:button; /*defined property value */
}
Parameters:
The parameters of the CSS appearance property can be defined as listed in the below points:
- appearance: normal|icon|window|button|menu|field
- normal: This displays the element with normal value.
- icon: It is providing the element with the small picture.
- window: This parameter displays the element as a viewport.
- button: This type of parameter shows the element as a button.
- menu: It provides a variety of options for the user to select from the list.
- field: It defines the element as an input field.
How does Appearance Property Work in CSS?
Appearance is a property being used to display a specific browser’s styling for a given element. For instance, dropdown boxes with HTML, sliders, fields of input, and so on. We could use it to apply browser styling to your website or to delete the native styling of the browser so that the element can be styled from scratch. Other than the appearance property also there is -webkit-appearance, primarily used by Google Chrome, Opera, Microsoft Edge and Safari, and -moz-appearance, used by Mozilla Firefox.
The CSS appearance property can be worked with one of the two key reasons:
- To add platform-specific style to an item that by default does not have it.
- To eliminate the unique styling of a platform to an item that does it by default.
Examples of CSS Appearance
Here are some of the examples which describe the usage :
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
Example #1
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS appearance property </title>
<style>
body {
background-color: #8FBC8F;
}
.button_class {
width: 40px;
height: 30px;
text-align: center;
appearance: button;
}
</style>
</head>
<body>
<center>
<h2> CSS appearance property </h2>
<br>
<div class="button_class"> Button </div>
</center>
</body>
</html>
Output:
Open the html file in a browser and it will produce the following result:
In the above example, the button element has been used which is labelled with the text as shown in the image.The background color of the page is specified with the #8FBC8FHEX code. The other CSS styles are defined in the class called .button_class.
Example #2
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS appearance property </title>
<style>
body {
background-color: #8FBC8F;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: -webkit-linear-gradient(left, #a78686 1%, #956823 10%, #9ceb33 25%, #96dd8d 40%, #65ede9 55%, #454c7e 70%, #a31cef 85%, #ac919b 90%);
background: linear-gradient(to right, #ce7e7e 1%, #d7d0c5 10%, #d7d5a9 25%, #7f977c 40%, #74e3e0 55%, #8d9aef 70%, #ded6e3 85%, #e79fba 90%);
border-radius: 1;
border: 1px solid #c0552c;
cursor: pointer;
font-size: 1.2em;
padding: 0.3em 1.2em 0.10em 0.15em;
}
.select_class {
display: inline-block;
position: sticky;
}
.select_class:after {
content: '';
width: 1px;
position: absolute;
right: 10px;
top: 55%;
margin-top: -5px;
border-width: 8px 5px;
border-style: outset;
pointer-events: none;
border-color: #1e2020 transparent transparenttransparent;
}
</style>
</head>
<body>
<center>
<h2> CSS appearance property </h2>
<br>
<div class="select_class">
<select>
<option>ViratKohli</option>
<option> M S Dhoni</option>
<option>Rohit Sharma </option>
<option>ShikarDhawan</option>
</select>
</div>
</center>
</body>
</html>
Output:
In the above example, we have used appearance property value as ‘none’ which is the default value and there will not be special styling for the elements.The element could be styled according to normal using CSS. The background will be set with the different types of HEX values along with the linear gradient that defines a progressive transition between more than two colors. This effect will be applied directly to select tag along with other CSS styles. The after selector adds different types of CSS styles after the content of the select tag.
Example #3
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CSS appearance property </title>
<style>
body {
background-color: #8FBC8F;
}
.reset_class {
-webkit-appearance: none;
}
.search_demo {
-webkit-appearance: searchfield;
}
</style>
</head>
<body>
<center>
<h2> CSS appearance property </h2>
<br>
<input type="search"> This is type attribute with search
<br><br>
<input type="text" class="search_demo"> This attribute type is text, and has been made like search
<br><br>
<input type="search" class="reset_class"> This is type attribute with search and reset
</center>
</body>
</html>
Output:
In the above example, the type attribute input defines the search field which are text fields intended for the user to enter queries for their search into this attribute. Also, we have created the search field with the webkit appearance in the ‘search_demo’ class. This value uses a search field theme for displaying the element.
Conclusion
So far, we have studied about CSS appearance property and by default, the appearance property defines how elements can appear especially in the controlling forms. Utilizing the different CSS properties, the default appearance can be completely redefined by setting the value to ‘none’. Even though -webkit-appearance property is not part of the standard W3C CSS definition, it’s intended to operate on browsers controlled by the webkit browser engine, like Apple Safari and Google Chrome. With full compatibility for browsers, add the equivalent W3C CSS3 to the code.
Recommended Articles
This is a guide to CSS Appearance. Here we also discuss the introduction to CSS Appearance and how does appearance property works along with different examples. You may also have a look at the following articles to learn more –
