HTML and CSS Reference
In-Depth Information
A single-line selection control, often called a
drop-down menu
, will show the selected option when in its
collapsed, inactive state, with a small arrow at one end as a visual cue that the control can be expanded.
Selected options in a multi-line
select
are usually highlighted with a different background color.
A selection control will only allow one option to be selected by default, especially obvious if it's a single-line
drop-down menu. Adding the Boolean
multiple
attribute automatically converts the
select
element to a
multi-line control and also allows the user to choose more than one option, usually by holding down the
Shift, Control, or Command key while making his choices. In the absence of a
size
attribute, some
browsers will automatically expand the multi-line menu to show 10 or even 20 options, or to show all of
them if there are only a few. Other browsers only show three or four options regardless of how many are in
the list. You can achieve a bit more cross-browser consistency by including a
size
attribute whenever you
allow multiple selections, but it isn't required. If the
size
attribute is greater than the number of options, the
rendered height honors the attribute and the remaining lines will be empty.
When a user submits the form, the selected options are passed as the value of the selection control. As
with most other form controls, a
name
attribute identifies the
select
element to associate the control with
its value (or values).
The display and behavior of a single-line selection can be somewhat unpredictable, largely dependent on
the browser and operating system, as well as the location of the control on the screen. If the control
appears near the bottom of the screen, the open menu will usually expand upward rather than downward
to prevent it from extending past the lower edge of the display where it can't be reached. A menu might
expand both up and down if the selected option is near the middle of the list. When expanded, a selection
control will overlap other content on the page and can even escape the boundaries of the browser window
if it needs to.
When the list of options is exceptionally long, a vertical scroll bar will appear in the expanded menu,
allowing the user to scroll up and down to see the entire list. The number of items visible in the expanded
list can change depending on the size of the screen or browser window, automatically determined by the
browser and operating system. A multi-line
select
element will display a vertical scroll bar if the number
of the options exceeds the number of visible lines, and many browsers reserve space on one side for a
scroll bar even when the box isn't scrollable.
So far we've been focusing on how desktop browsers render the
select
element, but
mobile phones and tablets may treat selection controls very differently, perhaps by
showing a scrolling popup dialog with radio buttons or checkboxes to make the
selection. Interacting with forms on a small touchscreen is a very different experience
from the traditional keyboard-and-mouse combination.
The width of a selection control is determined by the longest option in the list, even if that option isn't
selected. You can modify the element's natural width with the CSS
width
property, and any text that
exceeds that declared width will appear truncated, but most browsers will automatically expand the width
of the menu when it's opened. Each option appears on a single line; text doesn't wrap in a selection
control. Ideally, each option in the list should have a short text label of no more than a few words to avoid
