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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s