Combo & List Boxes

HTML uses the same construct, <select>...</select>, for creating combo boxes and list boxes. List boxes are created by specifying a value, greater than 1, for the size attribute for the select tag. The default value of unity causes a combobox to be displayed. Here is the code used to generate the example above

<select size="1">
    <optgroup label="Europe">
        <option>United Kingdom</option>
        <option>Luxembourg</option>
    </optgroup>    
    <optgroup label="Asia">
        <option>India</option>
        <option>Dubai</option>
    </optgroup>
</select>

Uncheck the Listbox checkbox to view the example as a combobox. There appears to be a bug in Opera that causes the select control to become unresponsive to script driven changes in its size unless the empty attribute setting code multiple="" is supplied or the initial size specification is greater than unity.

The optgroup element is used to group options that form a logical group. CSS styling applied to this element is inherited by its contained option elements. It is possible to use optgroup without assigning its label attribute as a shorthand way to style the contained option entries. Note that optgroups cannot be nested. In addition to generic attributes there are a small number that are specific to the select family of HTML elements.

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.
• disabled: Set this to disabled in order to make the entire select element, an option group within the element or a selection of one or more options unavailable for selection.
• multiple: This is an attribute of the select element. Set this to multiple in order to permit multiple items in the combo/list box to be selected simultaneously. The attribute combination multiple="multiple";size="1" gives strange results. In Firefox the combobox is drawn without the customary expand arrow button. In IE and Opera two buttons appear - one pointing upwards and the other downwards.
• name: As with all other form controls it is necessary to provide a name attribute in order to have the user selection(s) in the control shipped back to the server when the form is submitted.
• selected: For option elements set this to selected in order to have the option selected and highlighted. Setting the selected attribute for more than one option while simultaneously blocking multiple item selection in the parent style element results in only the last option element with this property assigned being selected.
• size: This is an attribute of select elements. It takes values of unity or greater. With size="1" the select renders itself as a combobox.
• value: This is an attribute of option elements. When assigned the setting is used instead of the displayed option text when submitting selected option information from a form. This setting is also useful for accessing selected option data from JavaScript.

The default rendition of selects in all three browsers has a hopelessly dated feel to it. This can be remedied to a certain extent by assigning the CSS background-color attribute. However, this still leaves the scrollbar with its normal Windows color settings. In our view attempting to create CSS + HTML scrollbars is a rather futile exercise. One runs into such efforts quite regularly while browsing the net and without a single exception they all sacrifice useability for appearance - never a good compromise. There is nothing wrong with having default Windows colors for scrollbars - the one you are seeing on the extreme right of this page is a case in point:it is familiar and easy to use. The expand arrow button in combobox mode cannot be styled either but there is a relatively simple workaround to the problem which we have used on this site. It is described here.