What is this?
This is a multiselect that works on mobile and desktop. It is what you have been waiting for for at least 15 years! It uses the native multiselect on mobile and a custom one on desktop. Data submission and validation works as expected and accesibility is guaranteed, because the solution depends on native form elements.
How to use it?
Just use a plain select with multiple and link the Javascript and the CSS.
<label>Multiselect 1</label>
<select multiple required>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<script src="multiselect.js"></script>
<link rel="stylesheet" href="multiselect.css" />
Features
The styling is kept to a minimum, but contains a custom down arrow on the selects. Using required will still show native client-side form validation. The component supports the optgroup element. On mobile there is a little ‘plus’ behind the label to switch to the desktop version of the multiselect, in case the mobile detection returns a false positive. Debug mode lets you toggle between the native and the polyfill component. You can enable it by adding ?debug=1 to the URL.
License
This code is licensed WTFPL.