CSS appearance Property

❮ Prev Next ❯

The appearance property in CSS is used to control the appearance of form controls such as buttons, checkboxes, radio buttons, and others. It allows you to change the style of the native user interface controls, providing a consistent look and feel across different browsers and devices.

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.

Note that the "appearance" property is not supported by all browsers, and its behavior may vary depending on the browser and the operating system. Also, changing the appearance of form controls may affect the usability and accessibility of your website, so it's important to use it judiciously.

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>
      input[type="checkbox"] {
        -webkit-appearance: none; /* remove default appearance on Webkit-based browsers */
        -moz-appearance: none; /* remove default appearance on Mozilla-based browsers */
        appearance: none; /* remove default appearance on all other browsers */
        width: 20px;
        height: 20px;
        border: 2px solid #333;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
        margin-right: 10px;
      }

      input[type="checkbox"]:checked:before {
        content: "\2714"; /* Unicode checkmark symbol */
        display: block;
        text-align: center;
        font-size: 14px;
        line-height: 16px;
        color: #fff;
        background-color: #333;
        border-radius: 2px;
        width: 20px;
        height: 20px;
      }
    </style>
  </head>
  <body>
    <input type="checkbox" id="myCheckbox" name="myCheckbox" />
    <label for="myCheckbox">Checkbox</label>
  </body>
</html>

Try it Yourself »

In this example, we first remove the default appearance of the checkbox by setting the appearance property to none. We then define the custom appearance of the checkbox using CSS rules.

The checkbox has a width and height of 20 pixels, a 2-pixel solid border, and a border-radius of 3 pixels to give it rounded corners. We also set the outline property to none to remove the outline that appears around the checkbox when it's focused.

To show a checkmark when the checkbox is checked, we use the :before pseudo-element to create a content box with the Unicode checkmark symbol (\2714) as its content. We give this box a width and height of 20 pixels, a background color of #333, and a border-radius of 2 pixels to make it look like a filled-in circle. We also set the text color to white to make the checkmark stand out against the dark background.

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.