CSS appearance Property
The appearance property displays an element using a platform-native styling based on the users' operating system's theme.
The -moz-appearance property is used in Gecko (Firefox) to show an element using platform-native styling based on the operating system's theme.
The -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix indicating that it belongs to the WebKit open-source framework.
The -webkit-appearance property is not part of the official W3C CSS specification and designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.
If this property is used on websites, it should be tested cautiously. The implementation of the appearance property can be quite different especially in older browsers. But in the newer browsers, there are only small differences.
It's an experimental technology.
| Initial Value | auto |
| Applies to | All elements. |
| Inherited | No. |
| Animatable | Yes. |
| Version | CSS3 |
| DOM Syntax | object.style.Appearance = "none"; |
Syntax¶
appearance: none | auto | initial | inherit | icon | window | button | menu | field | desktop | workspace | document | tooltip | dialogue | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menubar | outline-tree | range | signature | password;Example of the appearance property:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 80px;
height: 25px;
line-height: 25px;
text-align: center;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
</style>
</head>
<body>
<h2>Appearance property example</h2>
<p>Here is a...</p>
<div>Button?</div>
</body>
</html>Values¶
| Value | Description |
|---|---|
| none | This is the default. No special styling is applied. |
| auto | User-agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling. |
| 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. |
| button | A small object usually labeled with text that represents a user choice. |
| 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. |
| field | An area provided for a user to enter or edit a value, typically using a keyboard. There are several special fields. |
| 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 title bar that shows the name of the project or application. |
| document | A window used to represent a user document, typically with a title bar 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. |
| dialogue | 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. |
| 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 | The element is drawn like a checkbox, including only the actual "checkbox" portion. |
| 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. |
| menubar | A menu of menus, typically arranged linearly, in a horizontal bar. |
| 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. |
| 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 | Makes the property use its default value. |
| inherit | Inherits the property from its parents element. |
0 Comments
CAN FEEDBACK
Emoji