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

]]> -moz-border-*-colors CSS property sets a list of colors for the corresponding border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

]]> -moz-border-*-colors CSS property sets a list of colors for the corresponding border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

]]> -moz-border-*-colors CSS property sets a list of colors for the corresponding border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

]]> -moz-border-*-colors CSS property sets a list of colors for the corresponding border. When an element has a border that is larger than a single CSS pixel, each line of pixels uses the next color specified in this property, from the outside in. This eliminates the need for nested boxes. If the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified.

]]> The CSS box-align property specifies how an element aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box.

]]> Specifies the direction in which child elements of a flexible box element are laid out.

]]> Specifies an element’s flexibility.

Flexible elements can stretch or shrink to fit the size of the bounding box of their parent element. The amount of stretching or shrinkage of an element is determined by its flex value relative to the flex values of other elements within the same parent element.

]]> Specifies a rough ordering of elements in a flexible box.

Elements with lower ordinal group values are displayed first.

]]> Specifies the layout of elements nested within a flexible box element.

]]> The CSS -moz-box-pack and -webkit-box-pack properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box. See Flexbox for more about the properties of flexbox elements.

]]> Provides the width of the starting margin.

]]> The -moz-orient CSS property specifies the orientation of the element to which it's applied.

]]> In Mozilla applications like Firefox, the -moz-outline-radius CSS property can be used to give outlines rounded corners. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

]]> In Mozilla applications, -moz-outline-radius-topright sets the rounding of the top-right corner of the outline.

]]> In Mozilla applications, -moz-outline-radius-topleft sets the rounding of the top-left corner of the outline.

]]> In Mozilla applications, -moz-outline-radius-bottomleft sets the rounding of the bottom-left corner of the outline.

]]> In Mozilla applications, -moz-outline-radius-bottomright sets the rounding of the bottom-right corner of the outline.

]]> Specifies the logical end padding for an element.

]]> Specifies the logical start padding for an element.

]]> -moz-stack-sizing is an extended CSS property. Normally, a stack will change its size so that all of its child elements are completely visible. For example, moving a child of the stack far to the right will widen the stack so the child remains visible.

]]> Used to indicate whether the element can have the focus. By setting this to 'ignore', you can disable focusing the element, which means that the user will not be able to activate the element. The element will be skipped in the tab sequence. A similar property 'user-focus' was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

]]> In Mozilla applications, -moz-user-input determines if an element will accept user input. A similar property 'user-focus' was proposed in early drafts of a predecessor of css3-ui but was rejected by the working group.

]]> Determines whether a user can edit the content of an element.

]]> -moz-window-shadow specifies whether a window will have a shadow. Currently it only works on Mac OS X.

]]> Determines the background painting area, which determines the area within which the background is painted.

]]> For elements rendered as a single box, specifies the background positioning area. For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes operates on to determine the background positioning area(s).

]]> Specifies a size adjustment for displaying text content in FireFox on smartphones.

]]> If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the (images-in-menus) CSS pseudo-class.

]]> If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0. This corresponds to the (mac-graphite-theme) CSS pseudo-class.

]]> If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0. This corresponds to the (maemo-classic) CSS pseudo-class.

]]> Gives the number of device pixels per CSS pixel.

]]> Indicates which operating system version is currently being used. Currently only implemented on Windows.

]]> If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the (scrollbar-end-backward) CSS pseudo-class.

]]> If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the (scrollbar-end-forward) CSS pseudo-class.

]]> If the device's user interface displays a backward arrow button at the start of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the (scrollbar-start-backward) CSS pseudo-class.

]]> If the device's user interface displays a forward arrow button at the start of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the (scrollbar-start-forward) CSS pseudo-class.

]]> If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

This corresponds to the (scrollbar-thumb-proportional) CSS pseudo-class.

]]> If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

This corresponds to the (touch-enabled) CSS pseudo-class.

]]> If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

This corresponds to the (windows-classic) CSS pseudo-class.

]]> If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

This corresponds to the (windows-compositor) CSS pseudo-class.

]]> If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

This corresponds to the (windows-default-theme) CSS pseudo-class.

]]> If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

]]> Indicates which Windows theme is currently being used. Only available on Windows.

]]> The :any() pseudo-class lets you quickly construct sets of similar selectors by establishing groups from which any of the included items will match. This is an alternative to having to repeat the entire selector for the one item that varies.

]]> :-moz-broken matches elements representing broken image links.

]]> The :-moz-drag-over pseudo-class is used to edit an element when a drag-over event is called on it.

]]> The :-moz-first-node pseudo-class represents any element that is the first child node of some other element. It differs from : because it does not match a first child element with (non-whitespace) text before it.

]]> The :-moz-last-node pseudo-class matches an element that is the last child node of some other element. It differs from : because it does not match a last child element with (non-whitespace) text after it.

]]> The :-moz-focusring CSS pseudo-class is similar to the : pseudo-class, but it only matches an element if the element is currently focused AND the user-agent has focus ring drawing enabled. If :-moz-focusring matches then :focus also matches, but the converse is not always true - it depends on whether the user-agent has focus ring drawing enabled. Whether the user-agent has focus ring drawing enabled can depend on things like the settings of the operating system the user is using, so the precise behavior of this pseudo-class can vary from platform to platform depending on each platforms' particular focus best practices (defaults) or user modified settings.

]]> The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode.

]]> The :-moz-full-screen-ancestor CSS pseudo-class applies to all ancestors of the full-screen element, except containing frames in parent documents, which are the full-screen element in their own documents. However, those elements' ancestors have this class applied to them.

]]> :-moz-handler-blocked matches elements that cannot be displayed because their handlers have been blocked.

]]> :-moz-handler-crashed matches elements that cannot be displayed because the plugin responsible for drawing them has crashed.

]]> :-moz-handler-disabled matches elements that cannot be displayed because their handlers have been disabled by the user.

]]> The ::-moz-list-bullet pseudo-element is used to edit the bullet of a list element.

]]> The ::-moz-list-number pseudo-class lets you customize the appearance of numbers on list items (<li>) occurring in ordered lists (<ol>).

]]> :-moz-loading matches elements none of which can be displayed because they have not started loading, such as images that haven't started to arrive yet. Note that images that are in the process of loading are not matched by this pseudo-class.

]]> :-moz-locale-dir(<direction>) matches an element if the user interface is being displayed in given direction (ltr or rtl). This is determined by the preference intl.uidirection.locale (where locale is the current locale) being set to "ltr" or "rtl".

This selector does not work properly from HTML; it always matches, no matter whether the UI locale is left-to-right or right-to-left.

]]> The :-moz-lwtheme pseudo-class matches in chrome documents when the root element's lightweightthemes attribute is true and a theme is selected.

]]> The :-moz-lwtheme-brighttext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a bright text color is selected.

]]> The :-moz-lwtheme-darktext pseudo-class matches in chrome documents when :-moz-lwtheme is true and a lightweight theme with a dark text color is selected.

]]> The :-moz-only-whitespace pseudo-class matches an element that has no child nodes at all or empty text nodes or text nodes that have only white-space in them. Only when there are element nodes or text nodes with one or more characters inside the element, the element doesn't match this pseudo-class anymore.

]]> The ::-moz-page CSS pseudo-element applies to an individual page in print/print preview.

]]> The ::-moz-page-sequence CSS pseudo-element represents the background of the print preview.

]]> The ::-moz-scrolled-page-sequence CSS pseudo-element represents the background of the print preview.

]]> :-moz-placeholder pseudo-class represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-class to change the placeholder text color.

See also ::, :, :: ]]> ::-moz-placeholder pseudo-element represents any form element displaying placeholder text. This allows web developers and theme designers to customize the appearance of placeholder text, which is a light grey color by default. This may not work well if you've changed the background color of your form fields to be a similar color, for example, so you can use this pseudo-element to change the placeholder text color.

See also :, :, :: ]]> The ::-moz-progress-bar pseudo-element applies to the area of an HTML <progress> element that represents the amount of progress that has happened so far. This lets you, for example, change the color of progress bars.

]]> The ::--moz-range-progress represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input> of type="range", which corresponds to values lower than the value currently selected by the thumb.

]]> :-moz-suppressed matches elements representing images that were not loaded because loading images from that site has been blocked.

]]> The :-moz-submit-invalid CSS pseudo-class represents any submit button on forms whose contents aren't valid based on their validation constraints.

By default, no style is applied. You can use this style to customize the appearance of the submit button when there are invalid form fields.

]]> The :-moz-ui-invalid CSS pseudo-class represents any validated form element whose value isn't valid based on their validation constraints, in certain circumstances. This pseudo-class is applied according to the following rules:

  • If the control does not have focus, and the value is invalid, apply this pseudo-class.
  • If the control has focus, and the value was valid (including empty) when it gained focus, do not apply the pseudo-class.
  • If the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
  • If the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form.
]]> The :-moz-ui-valid CSS pseudo-class represents any validated form element whose value validates correctly based on its validation constraints.

This pseudo-class is applied according to the following rules:

  • If the control does not have focus, and the value is valid, apply this pseudo-class.
  • If the control has focus, and the value was valid (including empty) when it gained focus, apply this pseudo-class.
  • If the control has focus, and the value was invalid when it gained focus, re-validate on every keystroke.
  • If the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the form.

]]> :-moz-user-disabled matches elements representing images that were not loaded because images have been entirely disabled by the user's preferences.

]]> The :-moz-window-inactive pseudo-class matches any element while it's in an inactive window.

]]>