Select multiple items with HTML <select> with a touchscreen

Basj
April 18, 2024
129 views
1 vote
2 Answers

With a HTML <select> in multiple mode, how to enable the selection of multiple items with a touchscreen device?

Drag/drop or swipe cannot be used for selection, it is already used to scroll the scrollbar of the list
Click / tap cannot be used because this is used to select a new single item (see the UX in Windows File Explorer or Mac Finder)
Double-click / double-tap is already used to open the selected element (e.g. like in a file explorer)

Is there a built-in HTML5 way to do this?

select { width: 10em; height: 12em; }

<select multiple>
  <option>Dog</option>
  <option>Cat</option>
  <option>Hamster</option>
  <option>Parrot</option>
  <option>Spider</option>
  <option>Goldfish</option>
  <option>Elephant</option>
  <option>Mouse</option>
  <option>Bee</option>
  <option>Sheep</option>
  <option>Fox</option>
</select>

Note: this is how it is displayed by default on Android, but I don’t want this design because, when we don’t click on it, we can’t see the selected elements:

Answers

It does not seem that there is a native HTML5 way of helping you.

You can use select2 or similar libraries or try this one if it works for you

We could hide a normal select using media queries and have this one select options in it on a mobile

document.addEventListener('DOMContentLoaded', () => {
  const dropBtn = document.getElementById('dropbtn');
  const dropdownContent = document.getElementById('myDropdown');

  dropBtn.addEventListener('click', () => {
    dropdownContent.hidden = !dropdownContent.hidden;
  });

  window.addEventListener('click', (event) => {
    const tgt = event.target;
    const parent = tgt.closest('#myDropdown')
    if (!tgt.matches('#dropbtn') && !parent) {
      dropdownContent.hidden = true;
    }  
  });

  dropdownContent.addEventListener('click', (event) => {
    event.preventDefault();
    const tgt = event.target.closest('a');
    if (!tgt) return
    tgt.classList.toggle('active'); // we COULD select a hidden select here

  });
});

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a.active {
  background-color: lightblue;
}

<div class="dropdown">
  <button id="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content" hidden>
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Some workarounds using checkboxes if you want to stick with native element.

.ms,
.ms2 {
  max-height: 10rem;
  padding: 0 5px;
  width: max-content;
  overflow: auto;
  border: thin solid;
}

.ms label,.ms div,
.ms2 label {
  display: block;
  padding: 5px 0;
}

.ms2 input {
  display: none
}

.ms2 :checked+span {
  background: rgb(144, 196, 249);
}

<form method="POST">
  <div class="ms">
    <label><input type="checkbox" name="field" value="1"/><span>Option 1</span></label>
    <label><input type="checkbox" name="field" value="2"/><span>Option 2</span></label>
    <label><input type="checkbox" name="field" value="3"/><span>Option 3</span></label>
    <label><input type="checkbox" name="field" value="4"/><span>Option 4</span></label>
    <label><input type="checkbox" name="field" value="5"/><span>Option 5</span></label>
    <label><input type="checkbox" name="field" value="6"/><span>Option 6</span></label>
    <label><input type="checkbox" name="field" value="7"/><span>Option 7</span></label>
  </div>
</form>

<br/>

<form method="POST">
  <div class="ms">
    <div><input type="checkbox" name="field" value="1"/><span>Option 1</span></div>
    <div><input type="checkbox" name="field" value="2"/><span>Option 2</span></div>
    <div><input type="checkbox" name="field" value="3"/><span>Option 3</span></div>
    <div><input type="checkbox" name="field" value="4"/><span>Option 4</span></div>
    <div><input type="checkbox" name="field" value="5"/><span>Option 5</span></div>
    <div><input type="checkbox" name="field" value="6"/><span>Option 6</span></div>
    <div><input type="checkbox" name="field" value="7"/><span>Option 7</span></div>
  </div>
</form>

<br/>


<form method="POST">
  <div class="ms2">
    <label><input type="checkbox" name="field" value="1"/><span>Option 1</span></label>
    <label><input type="checkbox" name="field" value="2"/><span>Option 2</span></label>
    <label><input type="checkbox" name="field" value="3"/><span>Option 3</span></label>
    <label><input type="checkbox" name="field" value="4"/><span>Option 4</span></label>
    <label><input type="checkbox" name="field" value="5"/><span>Option 5</span></label>
    <label><input type="checkbox" name="field" value="6"/><span>Option 6</span></label>
    <label><input type="checkbox" name="field" value="7"/><span>Option 7</span></label>
  </div>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.