Skip to content
Advertisement

Single-selectable listview in pure HTML/CSS?

By default a <select> element is a dropdown menu which I don’t want: I want to display the full list. This is possible with multiple:

<select name="pets" multiple size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>

but then obviously the user can select multiple elements.

How to have a full list view (like with multiple, i.e. no dropdown menu), but have only one possible selected element?

Advertisement

Answer

Use the size attribute which takes the number of items you want to display and set it to the number of options you have (6) in order to get the full list view. Since you only want to allow 1 item to be selected, also remove the attribute multiple from the select element.

<select name="pets" size=6>
  <option>dog</option>
  <option>cat</option>
  <option>hamster</option>
  <option>bird</option>
  <option>donkey</option>
  <option>fish</option>
</select>

Check mdn for more information about the available attributes for the select element.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement