placeholder for select tag [duplicate]

Question

Is it possible to have a placeholder on a select tag?

<select placeholder="select your beverage">     <option>Tea</option>     <option>coffee</option>     <option>soda</option>  </select> 

or may be a possible work around?

Answer 1

According to Mozilla Dev Network, placeholder is not a valid attribute on a <select> input.

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 <option> as the <option>'s value.

<select>     <option value="" selected>select your beverage</option>     <option value="tea">Tea</option>     <option value="coffee">Coffee</option>     <option value="soda">Soda</option> </select> 

In modern browsers, adding the required attribute to the <select> element will not allow the user to submit the form which the element is part of if the selected option has an empty value.

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.¹ Here's how to style the default option to be greyed out:

select option[data-default] {    color: #888;  }

<select>    <option value="" selected data-default>select your beverage</option>    <option value="tea">Tea</option>    <option value="coffee">Coffee</option>    <option value="soda">Soda</option>  </select>

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 <select> element directly. In that case, you can only change the style of the currently selected element at any time.²

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 <option>, but remember that this will not prevent users from selecting it (using e.g. arrow keys/typing), this just makes it harder for them to do so.

---

_{¹ This answer previously advised the use of a default attribute which is non-standard and has no meaning on its own.
² 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.}

Answer 2

EDIT: This did/does work at the time I wrote it, but as Blexen pointed out, it's not in the spec.

Add an option like so:

<option default>Select Your Beverage</option> 

The correct way:

<option selected="selected">Select Your Beverage</option>