placeholder

Adding a placeholder to the select tag in HTML5

There is no placeholder attribute for the select tag. But there is a way around it. The following piece of code will help you solve the issue.

HTML Snippet:

<select name=”browsers” required>

<option value=”” disabled selected>Choose a Browser</option>
<option value=”chrome”>CHROME</option>
<option value=”safari”>SAFARI</option>
<option value=”opera”>OPERA</option>

</select>

CSS:

select:required:invalid {
color: #999;
}
option[value=””][disabled] {
display: none;
}
option {
color: #000;
}

Cheers,

SZ

Advertisements