CSS appearance

The CSS appearance property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls.

Note that the appearance property was dropped from the CSS 3 specification. However, it's still listed in the CSS Basic User Interface Module Level 4 (Editor's Draft as of November 2016), and may be redefined in the future.

Syntax

Possible Values

Note that at the time of writing, the appearance property had been dropped from the CSS3 draft specification, however, these are the values that had been proposed, and it's possible that the property may be revised in the future.

icon
a small picture representing an object, often with a name or label.
window
a viewport, a framed surface used to present objects and content for user viewing and interaction. There are several specific types of windows:
desktop
a window used to represent a system as a whole that often contains other windows.
workspace
a window used to represent a project or application that may contain other windows, typically with a titlebar that shows the name of the project or application.
document
a window used to represent a user document, typically with a titlebar that shows its name. May also be used to represent folders or directories in a file system.
tooltip
a window that is used to temporarily display information or help about an object. Also called "info" in the CSS2 system colors.
dialog
a window used to present a notification or alternatives for the user to choose as part of an action taken by the user. Also called "message-box" in the CSS2 system fonts.
button
a small object usually labeled with text that represents a user choice
push-button
a button that has a border surrounding it, often beveled to appear three dimensional, as if it is raised. Also called "caption" in CSS2 system fonts.
hyperlink
a button that represents a hypertext link, often as simple as normal text that is underlined and perhaps colored differently.
radio-button
a button that displays whether or not it is checked with a small circle next to the button label. There may be a disc inside the circle when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with some other graphic in the circle.
checkbox
a button that displays whether or not it is checked with a small box next to the button label. There may be an 'x' or check mark inside the box when the button is checked. An indeterminate (neither checked nor unchecked) state may be indicated with a dash '-' or a square or some other graphic in the box.
menu-item
a choice within a menu, which may also act as a label for a nested (hierarchical) menu.
tab
a button representing the label for a pane in a tabbed interface.
menu
a set of options for the user to choose from, perhaps more than one at a time. There are several specific types of menus.
menubar
a menu of menus, typically arranged linearly, in a horizontal bar.
pull-down-menu
a menu where the name of the menu is displayed and the options remain hidden until the user activates the menu. When the user releases or deactivates the menu, the options are hidden again.
pop-up-menu
a menu where all but the currently selected option remains hidden until the user activates the menu. When the user releases or deactivates the menu, all but the selected option are hidden again.
list-menu
a list of options for the user to choose from, perhaps more than one at a time.
radio-group
a menu where the options are displayed as radio-buttons.
checkbox-group
a menu where the options are displayed as checkboxes.
outline-tree
a menu where the options can be shown or hidden with small widgets, often represented by a small triangle or plus and minus signs.
range
a control that displays the current option, perhaps graphically and allows the user to select other options, perhaps by dragging a slider or turning a knob.
field
an area provided for a user to enter or edit a value, typically using a keyboard. There are several special fields.
combo-box
a field which is accompanied by a menu of preset values that can be used to quickly enter common or typical values.
signature
a field for entering a signature.
password
a field for entering a password. Typically the text is rendered as a set of bullets or boxes to obscure the value.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial
Represents the value specified as the property's initial value.
inherit
Represents the computed value of the property on the element's parent.
unset
This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Initial Value
none
Applies To
All elements
Inherited?
No
Media
Visual

Example Code

Basic CSS

Working Example within an HTML Document

Try it

CSS Specifications

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.