Scrolling menus
To make the menu display as a scrolling list, simply specify the number of lines you’d like to be visible in the list using the size
attribute, or add the multiple
attribute to the select
element, as shown in the following markup and in Figure 15-13. The multiple
attribute makes it possible for users to select more than one option from the list.
<p>What are your favorite ice cream flavors?</p> <select name="ice_cream"size=
"6
"multiple=
"multiple
"> <option>Rocky Road</option> <option>Mint Chocolate Chip</option> <option>Pistachio</option> <optionselected="selected"
>Vanilla</option> <optionselected="selected"
>Chocolate</option> <optionvalue="swirl"
>Fudge Ripple</option> <option>Super-duper Praline Pecan Smashup</option> <option>Bubblegum</option> </select>
This example also uses the selected
attribute to preselect options and the value
attribute for providing a value for the option that is different from the displayed text.
Figure 15-13. Use the size attribute to display a select menu as a scrolling list
Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.