Help regarding drop down menu

How do you implement “select an option” as shown in the below image?

I have used <select> and <option> and <optgroup> as shown below,

<select>
<optgroup label="Select an option">
<option>Challenges</option>
<option>Projects</option>
<option>Community</option>
<option>Open Source</option>
</optgroup>
</select>

Using that code I am able to get “Select an option” like that. But problem is that in the example prior to any selection, the drop down menu shows “Select an option”. While my code will show “Challenges” (the first option). “Select an option” is only visible when you drop down the menu.

The example form is using an <option> element with disabled and selected attributes set on it.

<select>
  <option disabled selected>Select an option</option>
  <option value="challenges">Challenges</option>
  <option value="projects">Projects</option>
  <option value="community">Community</option>
  <option value="openSource">Open Source</option>
</select>
2 Likes