According to Mozilla Dev Network, placeholder is not a valid attribute on a
Instead, add an option with an empty value and the selected attribute, as shown below. The empty value attribute is mandatory to prevent the default behaviour which is to use the contents of the
In modern browsers, adding the required attribute to the
If you want to style the default option inside the list (which appears when clicking the element), there's a limited number of CSS properties that are well-supported. color and background-color are the 2 safest bets, other CSS properties are likely to be ignored.
In my option the best way (in HTML5) to mark the default option is using the custom data-* attributes.1 Here's how to style the default option to be greyed out:
select option[data-default] {
color: #888;
}
However, 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
If you wanted to make it slightly harder for the user to select the default item, you could set the display: none; CSS rule on the
1 This answer previously advised the use of a default attribute which is non-standard and has no meaning on its own.
2 It's technically possible to style the select itself based on the selected value using JavaScript, but that's outside the scope of this question. This answer, however, covers this method.
