how do you set up a required select without a default value selected

Per this answer, you can use HTML5’s required attribute on a <select> if you give the default <option> an empty value attribute (among other criteria, see the <select> docs).

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element’s list of options (if any) is the empty string, and that option element’s parent node is the select element (and not an optgroup element), then that option is the select element’s placeholder label option.

So you would want

<select required>
    <option value="">Make a selection</option>
    <!-- more <option>s -->
</select>

Older browsers will need a JavaScript solution, given the fact that they don’t support HTML5.

Leave a Comment