2.3.3. Simulated drop-down lists

Drop-down lists referred to as “simulated” only use some of the default HTML form elements for drop-down lists, namely, the <select> fields and <option> tags. Simulated drop-down lists make use of a useful feature of CSS that makes it possible to customize a part of lists obtained.

The basic HTML code for a standard drop-down list:

<form action="index.html" method="post">
    <label for="eye-colour">
        Which colour are your eyes?
        <select name="eye-colour" id="eye-colour">
            <option value="black">Black</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
            <option value="brown">Brown</option>
            <option value="other">Other</option>
        </select>
    </label>
 
    <input type="submit" value="Submit information" />
</form>

Without JavaScript, a standard form is shown to the user.

With JavaScript, the behaviour of simulated drop-down lists must be the same as those of standard drop-down lists.

To implement the essentials of this method, you need to respect the following steps:

1. The CSS property opacity: 0; is applied to the <select> tag when JavaScript is active. This property makes the list invisible by default, but the options are displayed when you click <select>. The list stays in the same place on the screen, since it is only made invisible by changing the opacity.
2. An empty container is created in the DOM, just after the <select>. For example, a <span> can be used. This container is then dynamically populated in JavaScript, with the current value of the drop-down list. The script is called each time the status of the drop-down list changes.
3. The invisible <select> is positioned in the CSS just above the created container, so that when you click on the container it triggers the opening of the drop-down list.

Going into more detail, the scripts must handle the following points:

• The CSS property opacity: 0; is applied to the <select> tags.
• An empty container is added in the DOM just after the <select>. In our example, a <span> is used.
• The aria-hidden=“true” attribute is applied to the container, in order to hide it from users of screen readers, who otherwise would have access to the invisible <select>.
• The container cannot receive the focus, but a class is added to the container with the class attribute as soon as the focus is positioned on the <select>. This class is deleted as soon as the <select> loses the focus. The CSS uses this class to simulate visually that the focus has been set on the container.
• An image is included in the container using the <img/> tag (with the alt attribute left empty) to indicate that it is a drop-down list. A good accessibility practice is to use a down arrow for this element.
• As soon as the status of the list changes, the value of the container is updated. The container retrieves the value of the option selected in the drop-down list.
• The script that populates the container is always called once by default, when the page is loaded.

The resulting code in JavaScript is as follows:

<form method="post" action="index.html">
    <label for="eye-colour">
        Which colour are your eyes ?
        <div class="list-container">
            <select id="eye-colour" name="eye-colour">
                <option value="black">Black</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="brown">Brown</option>
                <option value="other">Other</option>
            </select>
            <span class="container-choice" aria-hidden="true">Black<img alt="" src="images/arrow.png"></span>
        </div>
    </label>
 
    <input type="submit" value="Submit information">
</form>

• Online demo of a simulated drop-down list.