<select> represents a control that provides a menu of various options. In general you set the following HTML structure:
<label for="category-select">Choose a category:</label> <select name="category" id="category-select"> <option value="">All</option> <option value="books">Books</option> <option value="audio-books">Audio-Books</option> <option value="living">Living and more</option> </select>
<select> has zero or more
<optgrou> elements. The
<label> in the example above is optional.
The size (width) problem
In most cases there is a problem with the width of the
select Element. The normal behavior of the Element is, that it will automatically grow to the width of the largest
option. Even if this one is not selected (
:checked). The Designer often describes only one state of the Element with the initial
option selected and a fixed width, e.g. 'All' and 80px. So if you set the width of the
select to a fixed size of 80px and there is an
option like 'Audio-Books' which is larger, the UI will break. As i mentioned before, the element will not change its size depending on the largest
option and the text will overflow the space.
What is happening?
The magic: Set the width of the
option. Easy, right? With a little trick it is easy. The trick is to set a helper element which contains the text of the
:checked option. In this demo i have set up a helper Element with
position: absolute and
aria-hidden="true" to tell the browser that it should hide the element for Screen-Reader or other a11y-Tools. On every
change the script will change the
innerText of the helper element, gets the new offset width and updates the CSS Custom Property
--dynamic-size with the new width. Furthermore there is a Custom Property
arrow-size for the dropdown-arrow-width of the
select element, which is added up to the dynamic sized property. That's it.