CSS appearance Property

The CSS appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.

The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.

The CSS -webkit-appearance property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.

Although the -webkit-appearance property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.

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

<!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>

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.

Browser support

4.0+ -webkit- 12.0+ -ms- 2.0+ -moz 3.1+ -webkit- 15.0+ -webkit-

Practice Your Knowledge

The followings are values of the CSS appearance property, except




Related articles