Appearance property (appearance)

The appearance property allows you to change any element into one of several standard user interface elements. For example, it will let you convert any element into a menu or window.

NOTE: Currently none of the browsers support the appearance property. However Firefox and Chrome will read the proprietary properties –moz-appearance, and –webkit-appearance properties respectively. Safari browser, being built by WebKit engine, supports –webkit-appearance property as well.

Syntax:

selector {

}

Values:

The appearance property has these values:

normal; This is the default value and it displays the element as it is.
icon; Displays the element as a small icon.
window; Displays the element as a viewport.
button; Displays the element as a button.
menu; Displays the element as a set of options for the user to choose from.
field; Displays the element as an input field.
initial, inherit

Example

The appearance property example with proprietary properties included:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h4 {
   margin-top:10px; margin-bottom:10px;
}
p {
    font-family:Arial; font-size:16px; color:#efe999; 
    font-weight:bold; text-align: center;
    width:25%; height:auto; padding:5px; margin:5%;
    background-color:#999efe;
    border:10px solid #efe999; border-top-right-radius:25px; border-top-left-radius:25px; border-bottom-left-radius:25px;
    appearance:icon;
        -moz-appearance:icon; /* Firefox */
        -webkit-appearance:icon; /* Safari and Chrome */
    /* ADD proprietary selectors if needed */
}
p#p2 {
    appearance:button;
        -moz-appearance:button; /* Firefox */
        -webkit-appearance:button; /* Safari and Chrome */
    /* ADD proprietary selectors if needed */
}
</style>
</head>
  
<body>

<h4>The appearance property example with ICON and BUTTON values:</h4>

<p>
This is the value ICON
</p>
<p id="p2">
This is the value BUTTON
</p>
</body>
</html>

›› go to examples ››

Appearance property (appearance)

Syntax:

Values:

Example

The appearance property example with proprietary properties included:

Comments

About

Contact

Get Connected