In order to access this site you need to enable JavaScript!

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.

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>

Copy Code

Preview

Syntax Highlighter

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>