Setting the Number of Items Visible in a Select List

By Stephen Bucaro

An HTML Select list is a form control used to create a drop-down list of items from which the user can select. Each item in a select list is defined by an option element. The select list can appear as a drop-down list as shown below.

Or, by setting its size property it can appear as a scrolling list, displaying more than one item at a time. The select list below shows three items because its size attribute is set to 3.

<select size="3">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
</select>

If you set the size attribute to the number of items in the list, the list it will appear as an open list with no scrollbar, as shown below.

<select size="5">
<option value="Bread">Bread</option>
<option value="Coffee">Coffee</option>
<option value="Pie">Pie</option>
<option value="Salad">Salad</option>
<option value="Soup">Soup</option>
</select>

Note: When setting size to number of items in list, in Gecko-based browsers like Firefox and Chrome, the scrollbar is grayed out. In Internet Explorer the scrollbar is totally hidden.

More HTML Code:
• What is HTML?
• Use HTML Target Attribute to Specify Where to Open Document
• Radio Button Basics
• HTML Definition List
• HTML title Tag
• HTML center Tag
• HTML Numbered or Ordered List
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• HTML Blockquote Basics
• Using col and colgroup to Apply Attributes to a Table Column

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues