BlogsDope image BlogsDope

Changing the Appearance of Your Website Elements

June 7, 2017 HTML CSS 3020

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, buttonbutton-bevelbutton-focuscaret, checkbox, checkbox-container, checkbox-label, checkmenuitem, listbox, listitem, menulist, menulist-button, menulist-text, menulist-textfield, progressbar, push-button, radio, radio-container, radio-labelresizer, 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.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).