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 has now been dropped from the CSS 3 specification. However, I've decided to keep this page here for reference. You can also check out the -webkit-appearance property for more information on formatting HTML elements as UI controls.
The examples on this page include browser-specific properties that start with extensions such as -webkit-, -moz-, etc. This is for browser compatibility reasons. See the bottom of this article for more on this.
| Syntax: |
appearance: <value> |
| Example |
appearance: button; /* CSS3 */
-webkit-appearance: button; /* Safari and Chrome */
-moz-appearance: button; /* Firefox */
-ms-appearance: button; /* Internet Explorer */
-o-appearance: button; /* Opera */
Note that this example includes the CSS3 appearance property as well as other CSS extensions. This is for browser compatibility.
|
| Try it yourself! |
|
| 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. You might also like to see the possible values for the -webkit-appearance property.
- 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.
|
| Initial Value: |
none
|
| Applies to: |
All elements
|
| Inherited: |
No
|
| Media: |
Visual
|
Browser Compatibility
At the time of writing, CSS3 was still under development and browser support for many CSS3 properties was limited or non-existent. For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari and Google Chrome, -ms- for Internet Explorer, -moz- for Firefox, -o- for 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.
Be aware that if you choose to use the proprietary CSS extensions in a live environment, your code will not pass any W3C CSS validation, as the browser-specific properties are not valid W3C properties.
Many of the CSS3 examples on this website include these browser specific properties. If they weren't included, most of the examples wouldn't work for most users (at least, not until possibly years after the article was written).
The major browser manufacturers are working to support the W3C properties, and eventually, you will be able to omit these browser-specific properties.
Enjoy this page?
-
- Link to this page (copy/paste into your own website or blog):
- Link to Quackit using one of these banner ads.
Thanks for supporting Quackit!
