Multiselect polyfill by Usecue

  1<form id="multiselect-form">
  2
  3<label for="multiselect1">Multiselect 1</label>
  4<select id="multiselect1" name="multiselect1" multiple required data-summary="{n} selected">
  5    <option value="option1">Option 1</option>
  6    <option value="option2">Option 2</option>
  7    <option value="option3">Option 3</option>
  8    <option value="option4">Option 4</option>
  9</select>
 10
 11<br>
 12
 13<label for="multiselect2">Multiselect 2</label>
 14<select id="multiselect2" name="multiselect2" multiple required data-summary="{n} selected">
 15    <option value="option1">Option 1</option>
 16    <option value="option2">Option 2</option>
 17    <option value="option3">Option 3</option>
 18    <option value="option4">Option 4</option>
 19    <option value="option5">Option 5</option>
 20    <option value="option6">Option 6</option>
 21    <option value="option7">Option 7</option>
 22    <option value="option8">Option 8</option>
 23    <option value="option9">Option 9</option>
 24    <option value="option10">Option 10</option>
 25    <option value="option11">Option 11</option>
 26    <option value="option12">Option 12</option>
 27    <option value="option13">Option 13</option>
 28    <option value="option14">Option 14</option>
 29    <option value="option15">Option 15</option>
 30    <option value="option16">Option 16</option>
 31    <option value="option17">Option 17</option>
 32    <option value="option18">Option 18</option>
 33    <option value="option19">Option 19</option>
 34    <option value="option20">Option 20</option>
 35    <option value="option21">Option 21</option>
 36    <option value="option22">Option 22</option>
 37    <option value="option23">Option 23</option>
 38    <option value="option24">Option 24</option>
 39    <option value="option25">Option 25</option>
 40    <option value="option26">Option 26</option>
 41    <option value="option27">Option 27</option>
 42    <option value="option28">Option 28</option>
 43    <option value="option29">Option 29</option>
 44    <option value="option30">Option 30</option>
 45    <option value="option31">Option 31</option>
 46    <option value="option32">Option 32</option>
 47    <option value="option33">Option 33</option>
 48    <option value="option34">Option 34</option>
 49    <option value="option35">Option 35</option>
 50    <option value="option36">Option 36</option>
 51    <option value="option37">Option 37</option>
 52    <option value="option38">Option 38</option>
 53    <option value="option39">Option 39</option>
 54    <option value="option40">Option 40</option>
 55    <option value="option41">Option 41</option>
 56    <option value="option42">Option 42</option>
 57    <option value="option43">Option 43</option>
 58    <option value="option44">Option 44</option>
 59</select>
 60
 61<br>
 62
 63<label for="multiselect3">Multiselect 3</label>
 64<select name="multiselect3" id="multiselect3" multiple required data-summary="{n} selected">
 65  <optgroup label="Fruit">
 66    <option value="apple">Apples</option>
 67    <option value="banana">Bananas</option>
 68    <option value="cherry">Cherries</option>
 69    <option value="damson">Damsons</option>
 70  </optgroup>
 71  <hr />
 72  <optgroup label="Vegetables">
 73    <option value="artichoke">Artichokes</option>
 74    <option value="broccoli">Broccoli</option>
 75    <option value="cabbage">Cabbages</option>
 76  </optgroup>
 77  <hr />
 78  <optgroup label="Meat">
 79    <option value="beef">Beef</option>
 80    <option value="chicken">Chicken</option>
 81    <option value="pork">Pork</option>
 82  </optgroup>
 83  <hr />
 84  <optgroup label="Fish">
 85    <option value="cod">Cod</option>
 86    <option value="haddock">Haddock</option>
 87    <option value="salmon">Salmon</option>
 88    <option value="turbot">Turbot</option>
 89  </optgroup>
 90</select>
 91
 92<br>
 93
 94<label for="select1">Select 1</label>
 95<select id="select1" name="select1" required>
 96    <option></option>
 97    <option value="option1">Option 1</option>
 98    <option value="option2">Option 2</option>
 99    <option value="option3">Option 3</option>
100</select>
101
102<br>
103
104<button type="submit">Submit</button>
105
106</form>
107
108<script src="multiselect.js"></script>
109<link rel="stylesheet" href="multiselect.css" />
110
111<style>
112    /* FOR DEMO ONLY: manual dark-mode toggle overriding the system preference */
113    :root[data-theme="light"] {color-scheme: light;}
114    :root[data-theme="dark"] {color-scheme: dark;}
115    :root[data-theme="light"] select {
116        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
117    }
118    :root[data-theme="dark"] select {
119        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
120    }
121</style>
122
123<a id="theme-toggle" href="#"></a>
124<br>
125<a id="toggle-debug" onclick="toggleDebug()" href="#">Toggle debug mode</a>
126
127<script>
128    /* FOR DEMO ONLY */
129    document.getElementById('multiselect-form').addEventListener('submit', event => {
130        event.preventDefault();
131        const formData = new FormData(event.target);
132        const entries = Array.from(formData.entries());
133        alert(entries.length? entries.map(([name, value]) => `${name}: ${value}`).join('\n') : 'Nothing submitted');
134    });
135    (function () {
136        const root = document.documentElement;
137        const link = document.getElementById('theme-toggle');
138        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
139        const isDark = () => root.dataset.theme ? root.dataset.theme === 'dark' : prefersDark.matches;
140        const updateLabel = () => {
141            link.textContent = isDark() ? 'Switch to light mode' : 'Switch to dark mode';
142        };
143        link.addEventListener('click', event => {
144            event.preventDefault();
145            root.dataset.theme = isDark() ? 'light' : 'dark';
146            updateLabel();
147        });
148        //no override yet: follow the browser until the visitor chooses
149        prefersDark.addEventListener('change', updateLabel);
150        updateLabel();
151    })();
152    function toggleDebug() {
153        //the demo runs inside an iframe; toggle on the address bar the visitor actually sees
154        let win = window;
155        try {
156            if (window.top !== window) { void window.top.location.href; win = window.top; }
157        } catch (e) {
158            //cross-origin parent: fall back to toggling the iframe's own URL
159        }
160        const url = new URL(win.location);
161        if (url.searchParams.get('debug') === '1') {
162            url.searchParams.delete('debug');
163        } else {
164            url.searchParams.set('debug', '1');
165        }
166        win.location = url;
167    }
168</script>

 1body, select, input, button {font-size: 1rem; line-height: 1.4; font-family: sans-serif;}
 2
 3:root {
 4    color-scheme: light dark;
 5    --large-padding: 0.5em;
 6    --medium-padding: 0.25em;
 7    --small-padding: 0.15em;
 8    --tiny-padding: 0.05em;
 9    --max-width: 400px;
10}
11
12form {max-width: var(--max-width);}
13label, select, fieldset {display: block;}
14label:not(:has(input)) {margin-bottom: var(--medium-padding);}
15select[multiple] + .fieldset {border: 1px solid; padding: var(--small-padding) 0;}
16select[multiple] + .fieldset label {padding: var(--tiny-padding) var(--medium-padding);}
17select[multiple] + .fieldset label input {display: inline-block; margin-right: var(--large-padding);}
18select[multiple] + .fieldset .multiselect-group {padding: var(--small-padding) var(--large-padding) var(--tiny-padding); font-weight: bold;}
19select[multiple] + .fieldset hr {border: none; border-top: 1px solid; margin: var(--large-padding) 0 var(--small-padding); opacity: 0.4;}
20.multiselect-native {position: relative;}
21.multiselect-native:not(.is-expanded) {border: 1px solid;}
22.multiselect-native:not(.is-expanded) output {display: flex; align-items: center;}
23.multiselect-native:not(.is-expanded) .fieldset,
24.multiselect-native.is-expanded output,
25.multiselect-native.is-expanded select {display: none;}
26.multiselect-native select {opacity: 0;}
27.multiselect-count {
28    position: absolute;
29    top: 1px;
30    left: 1px;
31    bottom: 1px;
32    right: 24px;
33    display: flex;
34    align-items: center;
35    padding: 0 var(--large-padding);
36    pointer-events: none;
37}
38input, select, option {padding: var(--small-padding) var(--large-padding);}
39select {
40    border: 1px solid;
41    padding-right: 24px;
42    width: 100%;
43    appearance: none;
44    -webkit-appearance: none;
45    -moz-appearance: none;
46    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center;
47    background-size: 8px;
48    font-family: sans-serif;
49}
50@media (prefers-color-scheme: dark) {
51    select {
52        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
53    }
54}
55select {
56    box-sizing: border-box;
57}
58/* native-output (set by JS where appearance: base-select is supported): in the collapsed native-select view, hide the custom count box and let the browser render its own localized "N selected" */
59.multiselect-native.native-output:not(.is-expanded) {border: none;}
60.multiselect-native.native-output:not(.is-expanded) output {display: none;}
61.multiselect-native.native-output:not(.is-expanded) select {
62    opacity: 1;
63    appearance: base-select;
64    background: none;
65    padding-right: var(--large-padding);
66}
67select[multiple] option {
68    padding-top: 0;
69    padding-bottom: 0;
70}
71label:has(button) {
72    display: flex;
73    justify-content: space-between;
74    align-items: center;
75}
76.multiselect-toggle {
77    display: inline-block;
78    padding: 0;
79    width: 1em;
80    height: 1em;
81    line-height: 1;
82    border: none;
83    background: none;
84    cursor: pointer;
85    font-family: monospace;
86}

  1const maxHeight = '205px';
  2const useNativeOnMobile = true;
  3
  4const mediaQuery = window.matchMedia('(pointer: coarse)');
  5const hasDebug = search => new URLSearchParams(search).get('debug') === '1';
  6let debug = hasDebug(window.location.search);
  7try {
  8    if (!debug && window.top !== window) debug = hasDebug(window.top.location.search);
  9} catch (e) {}
 10//use the browser's own localized "N selected" output where the customizable select (appearance: base-select) is supported
 11const preferNativeOutput = window.CSS && CSS.supports && CSS.supports('appearance', 'base-select');
 12const init = () => document.querySelectorAll('select[multiple]').forEach(multiselect => {
 13    if (multiselect.dataset.msReady) return;
 14    multiselect.dataset.msReady = '1';
 15    let override = null; //null = follow the media query, true = force checkboxes, false = force native select
 16    const fieldset = document.createElement('div');
 17    fieldset.className = 'fieldset';
 18    fieldset.setAttribute('role', 'group');
 19    fieldset.style.maxHeight = maxHeight;
 20    fieldset.style.overflowY = 'auto';
 21    const checkboxes = [];
 22    const addCheckbox = option => {
 23        const label = document.createElement('label');
 24        const checkbox = document.createElement('input');
 25        checkbox.type = 'checkbox';
 26        checkbox.value = option.value;
 27        checkbox.checked = option.selected;
 28        checkbox.disabled = option.disabled;
 29        checkbox.option = option;
 30        label.appendChild(checkbox);
 31        label.appendChild(document.createTextNode(option.textContent));
 32        fieldset.appendChild(label);
 33        checkboxes.push(checkbox);
 34    };
 35    Array.from(multiselect.children).forEach(child => {
 36        if (child.tagName === 'HR') {
 37            if (fieldset.lastElementChild && fieldset.lastElementChild.tagName !== 'HR') {
 38                fieldset.appendChild(document.createElement('hr'));
 39            }
 40        } else if (child.tagName === 'OPTGROUP') {
 41            const heading = document.createElement('div');
 42            heading.className = 'multiselect-group';
 43            heading.textContent = child.label;
 44            fieldset.appendChild(heading);
 45            Array.from(child.children).forEach(option => {
 46                if (option.tagName === 'OPTION' && option.value !== '') addCheckbox(option);
 47            });
 48        } else if (child.tagName === 'OPTION' && child.value !== '') {
 49            addCheckbox(child);
 50        }
 51    });
 52    const toggle = document.createElement('button');
 53    toggle.type = 'button';
 54    toggle.className = 'multiselect-toggle';
 55    const output = document.createElement('output');
 56    output.className = 'multiselect-count';
 57    output.setAttribute('aria-hidden', 'true');
 58    const wrapper = document.createElement('div');
 59    //native-output: in the collapsed native-select view (mobile), hide the custom count box and let the browser show its own localized "N selected"
 60    wrapper.className = preferNativeOutput ? 'multiselect-native native-output' : 'multiselect-native';
 61    multiselect.parentNode.insertBefore(wrapper, multiselect);
 62    wrapper.appendChild(multiselect);
 63    wrapper.appendChild(fieldset);
 64    wrapper.appendChild(output);
 65    const summaryTemplate = multiselect.dataset.summary || '{n} selected';
 66    const updateCount = () => {
 67        const count = Array.from(multiselect.selectedOptions).filter(option => option.value !== '').length;
 68        output.textContent = summaryTemplate.replace(/\{n\}/g, count);
 69    };
 70    multiselect.addEventListener('change', updateCount);
 71    const label = document.querySelector('label[for="' + multiselect.id + '"]');
 72    if (label) {
 73        if (!label.id) label.id = multiselect.id + '-label';
 74        fieldset.setAttribute('aria-labelledby', label.id);
 75        label.appendChild(document.createTextNode(' '));
 76        label.appendChild(toggle);
 77    } else {
 78        multiselect.parentNode.insertBefore(toggle, multiselect);
 79    }
 80    fieldset.addEventListener('change', () => {
 81        checkboxes.forEach(checkbox => {
 82            checkbox.option.selected = checkbox.checked;
 83        });
 84        multiselect.dispatchEvent(new Event('change', { bubbles: true }));
 85        syncValidation();
 86        updateCount();
 87    });
 88    const isExpanded = () => override === null ? (!useNativeOnMobile || !mediaQuery.matches) : override;
 89    const wasRequired = multiselect.required;
 90    const syncValidation = () => {
 91        const expanded = isExpanded();
 92        const anyChecked = checkboxes.some(checkbox => checkbox.checked);
 93        multiselect.required = wasRequired && !expanded;
 94        if (checkboxes[0]) {
 95            checkboxes[0].required = wasRequired && expanded && !anyChecked;
 96        }
 97    };
 98    const applyLayout = () => {
 99        if (isExpanded()) {
100            checkboxes.forEach(checkbox => {
101                checkbox.checked = checkbox.option.selected;
102            });
103            fieldset.style.display = '';
104            toggle.textContent = '-';
105            toggle.style.display = debug ? '' : 'none';
106            toggle.setAttribute('aria-expanded', 'true');
107            wrapper.classList.add('is-expanded');
108        } else {
109            multiselect.style.display = '';
110            multiselect.setAttribute('size', '1');
111            toggle.textContent = '+';
112            toggle.setAttribute('aria-expanded', 'false');
113            wrapper.classList.remove('is-expanded');
114        }
115        syncValidation();
116        updateCount();
117    };
118    toggle.addEventListener('click', () => {
119        override = !isExpanded();
120        applyLayout();
121    });
122    applyLayout();
123    mediaQuery.addEventListener('change', () => {
124        if (override === null) applyLayout();
125    });
126});
127if (document.readyState === 'loading') {
128    document.addEventListener('DOMContentLoaded', init);
129} else {
130    init();
131}