Single-selectable listview in pure HTML/CSS?

Basj 0
Viewed 43

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?

html-select javascript css html
3 Answers

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.

Victor Santizo0

You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.

This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.

    <div>
        <form>
        <select id="thelist" name="pets" size="6">
        <option value="1">dog</option>
        <option value="2">cat</option>
        <option value="3">hamster</option>
        <option value="4">bird</option>
        <option value="5">donkey</option>
        <option value="6">fish</option>
        </select>
        </form>
    </div>

I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.

You can then just set the height of the select list to anything you want inside the form. Here's my CSS

div {
    background-color: #fff0f0;
    height: 40em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 90%;
}
#thelist {
    height: 100%;
}

Put together as a snippet, and making it smaller to fit better here...

div {
    background-color: #fff0f0;
    height: 20em;
    padding: 1.5em 1.5em 0 1.5em;
}
form {
    background-color: #f0f0f0;
    height: 40%;
}
#thelist {
    height: 100%;
}
<div>
    <form>
        <select id="thelist" name="pets" size="6">
            <option value="1">dog</option>
            <option value="2">cat</option>
            <option value="3">hamster</option>
            <option value="4">bird</option>
            <option value="5">donkey</option>
            <option value="6">fish</option>
        </select>
    </form>
</div>

userU5gl10

I've tested a few solutions and found that you had to remove the multiple attribute from the <select> element

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

FUZIION0
Related