You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozAppearance

MozAppearance style property | webkitAppearance style property

Browser support:
MozAppearance
webkitAppearance
Specifies or retrieves theme rendering mode for an element. Allows you to make an element look like a standard user interface element.
With this property you can reach the user settings in the userChrome.css file, so your application uses the same design settings as the user's browser. This property is very useful if you develop an application under Firefox, Google Chrome or Safari.

Syntax:

object.MozAppearance;
object.webkitAppearance;
You can find the related objects in the Supported by objects section below.
MozAppearance: This property is read/write.
webkitAppearance: This property is read/write.
CSS page for this property: -moz-appearance

Possible values:

The type of this property is string.
 One of the following values: 
-moz-mac-unified-toolbar
Use Macintosh unified toolbar theme for rendering the object. Supported in Firefox from version 3.5.
-moz-win-browsertabbar-toolbox
Use the browser's tabbar toolbox theme for rendering the object.
-moz-win-communications-toolbox
Use communications toolbox theme for rendering the object.
-moz-win-media-toolbox
Use media toolbox theme for rendering the object.
button
Use button theme for rendering the object.
button-bevel
Use button bevel theme for rendering the object.
button-small
Use small button theme for rendering the object.
caret
Use caret theme for rendering the object.
checkbox
Use checkbox theme for rendering the object.
checkbox-container
Use checkbox container theme for rendering the object.
checkbox-small
Use small checkbox theme for rendering the object.
dialog
Use dialog theme for rendering the object.
inherit
Takes the value of this property from the computed style of the parent element.
listbox
Use listbox theme for rendering the object.
listitem
Use listitem theme for rendering the object.
menu
Use menu theme for rendering the object.
menulist
Use menulist theme for rendering the object.
menulist-button
Use menulist button theme for rendering the object.
menulist-text
Use menulist text theme for rendering the object.
menulist-textfield
Use menulist textfield theme for rendering the object.
none
Do not use any widget theme.
progressbar
Use progressbar theme for rendering the object.
push-button
Use push button theme for rendering the object.
radio
Use radio theme for rendering the object.
radio-container
Use radio container theme for rendering the object.
radio-small
Use small radio theme for rendering the object.
scrollbar
Use scrollbar theme for rendering the object.
scrollbarbutton-down
Use down scrollbarbutton theme for rendering the object.
scrollbarbutton-left
Use left scrollbarbutton theme for rendering the object.
scrollbarbutton-right
Use right scrollbarbutton theme for rendering the object.
scrollbarbutton-up
Use up scrollbarbutton theme for rendering the object.
scrollbargripper-horizontal
Use horizontal scrollbargripper theme for rendering the object.
scrollbargripper-vertical
Use vertical scrollbargripper theme for rendering the object.
scrollbarthumb-horizontal
Use horizontal scrollbarthumb theme for rendering the object.
scrollbarthumb-vertical
Use vertical scrollbarthumb theme for rendering the object.
scrollbartrack-horizontal
Use horizontal scrollbartrack theme for rendering the object.
scrollbartrack-vertical
Use vertical scrollbartrack theme for rendering the object.
searchfield
Use searchfield theme for rendering the object.
searchfield-cancel-button
Use the searchfield's cancel button theme for rendering the object.
searchfield-decoration
Use the searchfield theme for rendering the object.
searchfield-results-button
Use the searchfield's results button theme for rendering the object.
searchfield-results-decoration
Use the searchfield's results decoration theme for rendering the object.
separator
Use separator theme for rendering the object.
slider-horizontal
Use horizontal slider theme for rendering the object.
slider-vertical
Use vertical slider theme for rendering the object.
sliderthumb-horizontal
Use horizontal sliderthumb theme for rendering the object.
sliderthumb-vertical
Use vertical sliderthumb theme for rendering the object.
square-button
Use square button theme for rendering the object.
statusbar
Use statusbar theme for rendering the object.
tab
Use tab theme for rendering the object.
tab-left-edge
Use left-edge of tab theme for rendering the object.
tabpanels
Use tabpanels theme for rendering the object.
textarea
Use textarea theme for rendering the object.
textfield
Use textfield theme for rendering the object.
toolbar
Use toolbar theme for rendering the object.
toolbarbutton
Use toolbarbutton theme for rendering the object.
toolbox
Use toolbox theme for rendering the object.
tooltip
Use tooltip theme for rendering the object.
treeheadercell
Use treeheadercell theme for rendering the object.
treeheadersortarrow
Use treeheadersortarrow theme for rendering the object.
treeitem
Use treeitem theme for rendering the object.
treetwisty
Use treetwisty theme for rendering the object.
treetwistyopen
Use treetwistyopen theme for rendering the object.
treeview
Use treeview theme for rendering the object.
Default: none.

Example HTML code 1:

This example illustrates the use of the -moz-appearance and the -webkit-appearance properties:
<head>
    <style>
        .example {
            -moz-appearance: menulist-button;
            -webkit-appearance: menulist-button;
        }
    </style>
</head>
<body>
    <button class="example">toolbar like button</button>
</body>
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozAppearance and webkitAppearance properties in JavaScript:
<head>
    <script type="text/javascript">
        function ChangeApp (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the text of the selected option
            var appType = selectTag.options[whichSelected].text;

            var button = document.getElementById ("myButton");

            if ('MozAppearance' in button.style) {
                button.style.MozAppearance = appType;
            } else if ('webkitAppearance' in button.style) {
                button.style.webkitAppearance = appType;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td style="vertical-align:middle;">
                <button id="myButton">Change MozAppearance!</button>
            </td>
            <td>
                <select onchange="ChangeApp (this);" size="39">
                    <option />none
                    <option />button
                    <option />button-small
                    <option />checkbox
                    <option />checkbox-container
                    <option />checkbox-small
                    <option />dialog
                    <option />listbox
                    <option />menu
                    <option />menulist
                    <option />menulist-button
                    <option />menulist-textfield
                    <option />progressbar
                    <option />radio
                    <option />radio-container
                    <option />radio-small
                    <option />scrollbar
                    <option />scrollbarbutton-down
                    <option />scrollbarbutton-left
                    <option />scrollbarbutton-right
                    <option />scrollbarbutton-up
                    <option />scrollbartrack-horizontal
                    <option />scrollbartrack-vertical
                    <option />separator
                    <option />statusbar
                    <option />tab
                    <option />tab-left-edge
                    <option />tabpanels
                    <option />textfield
                    <option />toolbar
                    <option />toolbarbutton
                    <option />toolbox
                    <option />tooltip
                    <option />treeheadercell
                    <option />treeheadersortarrow
                    <option />treeitem
                    <option />treetwisty
                    <option />treetwistyopen
                    <option />treeview
                </select>
            </td>
        </tr>
    </table>
</body>
Did you find this example helpful? yes no

Supported by objects:

External links:

User Contributed Comments

Post Content

Post Content