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

You are here: Reference > HTML > tags > optGroup

optGroup element

Browser support:

Defines a group of option elements in a select form field.

The optgroup element is used to group option elements in a select element.

If you want to see the HTML tags by categories, please visit this page.

This element requires a closing tag.

JavaScript page for this element: optGroup.

Possible members:

Attributes

Events

Styles

Pseudos

accessKey

Sets an access key to an element.

class

Sets the style class or classes that belong to the element.

contentEditable

	3

Sets whether the contents of the object are editable.

dir

Sets the text direction as related to the lang attribute.

DISABLED

8

Sets the state of an object for user interaction.

Sets a unique identifier for the object.

label

Sets the text to show as the contents of the option group element.

lang

Specifies the language of the element.

language

Sets the scripting language for the current element. Use it only for the script element.

name

Sets the name of an element.

style

Sets an inline style associated with an element.

tabIndex

Specifies the tabbing order for keyboard navigation using the TAB key.

title

Specifies a tooltip for an element.

xml:lang

Sets the language code of the XML document.

-moz-background-clip

Sets which part of background is visible.

-moz-background-inline-policy

Specifies how the background-image of an inline element is determined when the contents of the inline element wrap onto multiple lines.

-moz-background-origin

Specifies how the background-position property is determined, i.e. it defines the reference point that the background-image is relative to.

-moz-binding

Sets the URL of the XBL (Extensible Binding Language) file containing the binding.

-moz-border-bottom-colors

Sets the border colors for the bottom edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

-moz-border-left-colors

Sets the border colors for the left edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

-moz-border-radius

Sets the rounding of the corners of the border.

-moz-border-radius-bottomleft

Sets the rounding of the lower left corner of the border.

-moz-border-radius-bottomright

Sets the rounding of the lower right corner of the border.

-moz-border-radius-topleft

Sets the rounding of the upper left corner of the border.

-moz-border-radius-topright

Sets the rounding of the upper right corner of the border.

-moz-border-right-colors

Sets the border colors for the right edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

-moz-border-top-colors

Sets the border colors for the top edge. You can specify as many color values as you want. All specified colors will appear as a 1px thick line.

-moz-float-edge

Specifies whether the height and width properties of the element include the margin, border, or padding thickness.

-moz-margin-end

Specifies the width of the left or the right margin, depends on the writing direction.

-moz-margin-start

Specifies the width of the left or the right margin, depends on the writing direction.

-moz-opacity

Sets the opacity level. For a cross-browser solution, use the opacity property in Firefox, Google Chrome, Safari and Opera, and the filter property ('filter:Alpha(opacity=50)') in Internet Explorer.

-moz-outline


	3.6

Sets the outline of the element.

-moz-outline-color


	3.6

Sets the color of the outline.

-moz-outline-offset


	3.6

Sets the amount of space between the outline and the border or the edge of the element.

-moz-outline-radius

Sets the rounding of the outline corners.

-moz-outline-radius-bottomleft

Sets the rounding of the lower left outline corner.

-moz-outline-radius-bottomright

Sets the rounding of the lower right outline corner.

-moz-outline-radius-topleft

Sets the rounding of the upper left outline corner.

-moz-outline-radius-topright

Sets the rounding of the upper right outline corner.

-moz-outline-style


	3.6

Sets the style of the left, right, top, and bottom borders of the object.

-moz-outline-width


	3.6

Sets the width of the outline.

-moz-user-focus

Specifies whether the element can have focus.

-moz-user-input

Specifies whether the element can have the input focus.

-moz-user-modify

Specifies which part of the contents of an element can be modified by the user.

-moz-user-select

Specifies whether the text of the element can be selected.

-o-text-overflow

		9

Specifies how to handle the overflowed area of text.

-op-phonemes

Specifies a phonetic pronunciation for the text contained by the corresponding element.

-op-voice-pitch

Specifies the average frequency of the speaking voice.

-op-voice-pitch-range

Specifies the variation from the average pitch of the voice.

-op-voice-rate

Specifies the number of spoken words per minute.

-op-voice-stress

Specifies the strength of emphasis to be applied.

-op-voice-volume

Sets the volume of a spoken element.

-xv-interpret-as

Specifies how to interpret the contents of the corresponding element.

-xv-phonemes

Specifies a phonetic pronunciation for the text contained by the corresponding element.

-xv-voice-balance

Sets the balance between left and right channels.

-xv-voice-duration

Specifies how long a given element is to be rendered.

-xv-voice-pitch

Specifies the average frequency of the speaking voice.

-xv-voice-pitch-range

Specifies the variation from the average pitch of the voice.

-xv-voice-rate

Specifies the number of spoken words per minute.

-xv-voice-stress

Specifies the strength of emphasis to be applied.

-xv-voice-volume

Sets the volume of a spoken element.

background

Specifies up to five separate background properties, in a shorthand form.

background-color

Specifies the color to use for the background of the object.

behavior

Sets the URL of a behavior file.

border

Sets up to three separate border properties, in a shorthand form.

border-bottom

Sets the color, style and width properties for the element's bottom border, in a shorthand form.

border-bottom-color

Specifies the color of the element's bottom border.

border-bottom-style

Specifies the style of the element's bottom border.

border-bottom-width

Specifies the width of the element's bottom border.

border-color

Specifies the color of the element's border.

border-left

Specifies the color, style and width properties for the element's left border, in a shorthand form.

border-left-color

Specifies the color of the element's left border.

border-left-style

Specifies the style of the element's left border.

border-left-width

Specifies the width of the element's left border.

border-right

Specifies the color, style and width properties for the element's right border, in a shorthand form.

border-right-color

Specifies the color of the element's right border.

border-right-style

Specifies the style of the element's right border.

border-right-width

Specifies the width of the element's right border.

border-style

Specifies the style of the element's border.

border-top

Specifies the color, style and width properties for the element's top border, in a shorthand form.

border-top-color

Specifies the color of the element's top border.

border-top-style

Specifies the style of the element's top border.

border-top-width

Specifies the width of the element's top border.

border-width

Specifies the width of the element's border.

color

Specifies the color of the element's text content.

direction

Specifies the text direction.

display

Specifies the element's display type.

font

Specifies up to six separate font properties, in a shorthand form.

font-family

Specifies the font face for text.

font-size

Specifies the font size of the text.

font-size-adjust

Specifies font aspect value (font size divided by x-height).

font-style

Specifies whether the style of the font is normal, italic or oblique.

font-variant

Specifies a variation of the specified or default font-family.

font-weight

Specifies the font weight of the text.

height

Specifies the height of the visible area for an element.

letter-spacing

Specifies the amount of space between letters.

margin

Specifies a shorthand property for setting the top, right, bottom and left margins, in that order.

margin-bottom

Specifies the bottom margin of the object.

margin-left

Specifies the left margin of the object.

margin-right

Specifies the right margin of the object.

margin-top

Specifies the top margin of the object.

opacity

Sets the transparency level of an element. For Internet Explorer, use filter with 'Alpha(opacity=percent)'.

outline

Specifies a shorthand form for all outline properties at once. Outline is a line around an element, but different from the border property.

outline-color

Specifies the color for the outline for an element.

outline-offset

Sets the amount of space between the outline and the border or the edge of the element.

outline-style

Specifies the style for an element's outline.

outline-width

Specifies the width for an element's outline.

padding

Specifies a shorthand property for setting the top, right, bottom and left spaces between an element's border and its contents, in that order.

padding-bottom

Specifies the space between an element's bottom border and its contents.

padding-left

Specifies the space between an element's left border and its contents.

padding-right

Specifies the space between an element's right border and its contents.

padding-top

Specifies the space between an element's top border and its contents.

text-decoration

Specifies the appearance characteristics of text, whether it is underlined, overlined, lined-through or blinking text.

text-transform

Specifies the case of the text.

unicode-bidi

Specifies whether the text should be overridden to support multiple languages in the same document. Use with the direction property.

visibility

Specifies whether the element is visible.

voice-family

Specifies the type of voice to use as speak control.

width

Specifies the width of the visible area for an element.

word-spacing

Specifies the spacing between words.

Example HTML code 1:

This example illustrates the use of the optGroup element:

<select>
    <option selected="selected" value="none">None</option>
    <optgroup label="Fruits">
        <option value="Apple">Apple</option>
        <option value="Pear">Pear</option>
        <option value="Peach">Peach</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="Bean">Bean</option>
        <option value="Cole">Cole</option>
    </optgroup>
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

option
select

External links:

optgroup element (MSDN)
optgroup element (Safari Reference Library)
optgroup element (W3C)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments

optGroup element

Possible members:

Example HTML code 1:

Related pages:

External links:

Post Content