Make a placeholder for a “select” box

We all know that for a text input, the placeholders are working fine. But what about if we use a placeholder for a select box as well? Let’s see.

Sometimes we need to use placeholder for a selectbox and making grey color is also remarkable.

Suppose, we have a following html for a selectbox:

<select>
<option value="0">First</option>
<option value="1">Second</option>
</select>

Read Also: HTML5 placeholder color with CSS

So, if we want to put a placeholder on selectbox then we can use the following thing:

<select>
<option value="" disabled selected hidden>Please Choose...</option>
<option value="0">First</option>
<option value="1">Second</option>
</select>

And the style will be as below:

<style>
select:invalid { color: gray; }
</style>

The disabled option stops the “<option>” being selected, whereas just using “display:none” allows the user to select via the keyboard arrows.
The “display:none” style just makes the list box look good.

Output example: