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: