How to add a placeholder to select element in html

In this tutorial, we are going to learn about how to add a placeholder text to a <select> element (tag) in html.

The Html form elements like input and textarea we have a placeholder attribute to add the placeholder text.

<input placeholder="Name"/>
<textarea placeholder="comment"></textarea>

Adding placeholder to select element

In select element we don’t have a placeholder attribute but we can add it by using <option> element with disabled, selected and hidden attribute.

Example:

<select>
  <option value="" disabled selected hidden>Choose your framework</option>  <option value="react">React</option>
  <option value="Vue">Vue</option>
  <option value="Angular">Angular</option>
</select>

1. The disabled attribute makes the option unable to select.
2. The selected attribute shows the text inside <option> element opening and closing tags.
3. Whenever a user clicks on a select dropdown the hidden attribute makes this option hidden.