Property Description
The appearance property specifies that an element look like a standard user interface element.
This property has the following syntax:
appearance: normal|icon|window|button|menu|field|initial|inherit;
Property Values
| Value | Description |
|---|---|
| normal | Render the element as normal |
| icon | Render the element as a small picture |
| window | Render the element as a viewport |
| button | Render the element as a button |
| menu | Render the element as a set of options for the user to choose from |
| field | Render the element as an input field |
| initial | Specifies that the value of the property should be set to the default value |
| inherit | Specifies that the value of the property should be inherited from the parent element |
Examples
This example shows a few different appearance settings:
<style type="text/css">
div.buttontest
{
width:75px;
padding:5px;
text-align:center;
appearance:button;
/* Firefox */
-moz-appearance:button;
/* Safari and Google Chrome */
-webkit-appearance:button;
}
</style>
<div class="buttontest">Button Div</div>This produces the following result:
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
| 3 |
Miscellaneous Information
| Inherited: | No |
|---|---|
| Defined In: | CSS3 |
| Default Value: | none |