Problems with creating placeholders for HTML selection boxes

I'm using a placeholder in a text input and it works fine. But I also want to use a placeholder for my select box. Of course, I can use the following code:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

But the "Choose Your Option" is black instead of light grey. So my solution would probably be CSS based. jQuery is also good.

This will just grey out the options in the dropdown menu (so after clicking the arrow):

option:first {
    color: #999;
}

The question is: How do people create placeholders in select boxes? But it has been answered, hurray.

Using this method causes the selected value to always be greyed out (even after selecting a real option):

select {
    color: #999;
}

Solution:

Non-CSS - no JavaScript/jQuery answer:

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

The above is the detailed content about the problem of creating placeholders in html selection boxes. For more information about html selection box placeholders, please pay attention to other related articles on 123WORDPRESS.COM!