There is an interesting CSS property that lets you change the appearance of your website elements, not like the way you might be thinking. Imagine if you could make your div appear like a button or change the appearance of your input field. Sounds interesting, right?
You can do all this with the CSS appearance
property. This property is used to display an element to resemble a standard user interface element.
Have a look at the syntax of this property before moving to its applications.
CSS
.element {
-webkit-appearance: value; // Chrome, Safari
-moz-appearance: value; // Firefox
appearance: value;
}
Basically, this property is used for two reasons.
The first is to remove the default platform-specific appearance of an element. For example, if you want to remove the normal platform-specific styling of a button.
The second reason is to style an element like the platform-specific appearance of another element. For example, if you want to want to make a div appear like a button.
Values of appearance
First of all, let's talk about removing the platform-specific styling of an element. For that, the value none
is used.
See the Pen WOvNXL by Aakhya Singh (@aakhya) on CodePen.
In the above demo, the first input field and the first button has default styling. For the second input field and button, the default browser based styling is removed by giving the value none
to the appearance
property.
Now, suppose you want to make a div look like a button. For that, you just need to give the value button
to the appearance
property.
See the Pen converting div to button by Aakhya Singh (@aakhya) on CodePen.
So, you can convert one HTML element into another by just giving the corresponding values to the appearance
property. I also changed the value of the cursor
property to default
because the cursor value is different for div and button.
Let's look at some more appearance transitions that you can do using this property.
See the Pen transforming HTML elements by Aakhya Singh (@aakhya) on CodePen.
These were just a few examples to make you familiar with this property. You can change the appearance of many such HTML elements by giving different values to the appearance
property.
Accepted Values
none
, button
, button-bevel
, button-focus
, caret
, checkbox
, checkbox-container
, checkbox-label
, checkmenuitem
, listbox
, listitem
, menulist
, menulist-button
, menulist-text
, menulist-textfield
, progressbar
, push-button
, radio
, radio-container
, radio-label
resizer
, scrollbarbutton-down
, scrollbarbutton-left
, scrollbarbutton-right
, scrollbarbutton-up
, scrollbarthumb-horizontal
, scrollbarthumb-vertical
, scrollbartrack-horizontal
, scrollbartrack-vertical
, searchfield
, separator
, slider-horizontal
, slider-vertical
, statusbar
, tab
, tabpanel
, tabpanels
, textfield
, textfield-multiline
, toolbar
, toolbox
, tooltip
, treeheader
, button-focus
, treeheadercell
, treeheadersortarrow
, treeitem
, treetwisty
, treetwistyopen
, treeview
, window
Browser Support
Browsers do not support non-prefixed versions yet. -webkit-
prefix is used for support from Chrome and Safari, and -moz-
prefix is used for support from Firefox. IE and Opera don't support even prefixed values.
Conclusion
This post was just to introduce you with the appearance
property of CSS, although the browsers don't fully satisfy the property. Also, all of the above-mentioned values may not be supported by all the supporting browsers. You can use this property either when you want the physical properties of one element in your layout and the appearance of another, or when you don't want the default properties of any HTML element. But it's always fun to try out new stuff using CSS.