How to make HTML select a placeholder for a 'select' box?

General Discussions
#1

How to make HTML select a placeholder for a ‘select’ box?

#2

Here’s an HTML snippet that creates a dropdown menu with a disabled “Select your option” placeholder:

<label for="option">Option name:</label>
<select id="option">
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

This code creates a dropdown menu with a default “Select your option” option that is disabled and selected by default. The user can then select another option from the list. Note that this approach does not use CSS or JavaScript/jQuery, making it compatible with a wide range of browsers, including the latest versions of Firefox, Chrome, and Safari.

#3

Here’s a simple HTML and CSS solution that allows the user to select an option and then re-select the default option if needed, without using any JavaScript:

HTML:

<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

CSS:

option[default] {
  display: none;
}

In this solution, the CSS hides the default option (Select Your Age) from the dropdown list. When the user selects an option other than the default, the default option remains hidden. If the user wants to re-select the default option, it is still available in the dropdown list. This approach is simple and should work for simpler projects without requiring any JavaScript.