Affecting the Appearance of Forms 245FormsAffecting the Appearance of FormsWeb Design in a Nutshell, eMatter EditionWorking with Menus
As mentioned earlier, browsers automatically generate form elements such as pull-
down and scrolling menus; however, there are a few ways in which you can
tweak their appearance.
First, your page may look neater overall if your menu elements are all the same
width so they align nicely. The width of a menu element is automatically deter-
mined by the item with the most number of characters in the list. (Thesize
attribute affects only the list’s height.)
One way to give your lists the same width is to create a dummy option item
(
A dummy option item containing only a number of hyphens can also be used as a
divider within the list. Select menus can not contain horizontal rules (
), so
adding a row of hyphens is the closest you can get to dividing the list items visu-
ally into groups, as shown in Figure 12-15.
The trick to doing this successfully is to make sure that if the user selects your
dummy row (and there’s nothing that can prevent users from doing so), the infor-
mation will not be transferred to the server. The desired effect is to make it seem
like nothing happens. This can be accomplished with a JavaScript such as the
following one contributed to this book by Martin Burns of Edinburgh, Scotland:
<SCRIPT>
function checker(selector) {
if(selector.options[selector.selectedIndex].text = '---------
------') {
selector.options.selectedIndex = selector.options.
defaultIndex
}
</SCRIPT>
<SELECT name="brand" size=1 onChange="checker(this)">
<OPTION selected value="">Arugula
<OPTION>Romaine
<OPTION>Spinach
<OPTION>Swiss Chard
<OPTION>---------------
<OPTION>Acorn SquashFigure 12-15: A row of hyphens serves as a divider in a select menu