According to
Mozilla Dev Network[
^], placeholder is not a valid attribute on a input. And also, a value attribute is suggested, just in case some older browsers depend on it.
Instead, add an option with an empty value like so:
<select placeholder="select your beverage">
<option value="" default="" selected="">select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
Bonus: In newer browsers, adding the required attribute to the element will not allow the user to submit the form if the default option is selected.
If you want to style the default option, you need the following CSS:
select option[default] {
color: #333;
}
Note that this will only style the item inside the drop-down list, not the value displayed on the input. If you want to style that with CSS target your element directly.
If you wanted to make it slightly harder for the user to select the default item, you could use a display: none; CSS rule, but remember that this will not prevent users from selecting it, this just makes it harder for them to do so.