How to make a placeholder for select box in HTML

In this article, we will see how to add a placeholder in the <select> tag for multiple dropdowns of HTML.

To add a placeholder to <select> dropdown, we have to use the <option> tag and add disabled, hidden, and selected attributes to it.

The placeholder attribute is used to indicate what type of value is expected from a user.

Here is an example of using placeholder attributes to add placeholder text in a form.

<form>
    <input placeholder="Enter Name" />
    <textarea placeholder="Enter your message" />
</form>

The output will be like this,

However, in < select > element we do not get the placeholder attribute to write the text.

So what we can do is use the < option > tag along with the disabled and selected attributes to write the placeholder text in it.

Example:

<select>
  <option value="" disabled selected hidden>Select a color</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
</select>

The disabled attribute make the option unable to select from the options.

The selected attribute specifies the option that should be pre-selected when the page loads.

The hidden attribute hides the option when we open the drop-down from the < select > box on a page.