2

I am working with html select boxes and have found that they currently don't support the placeholder attribute, but I don't exactly understand why this is the case.

I would just like to understand what are the reasons for this if any? Thanks for any insight.

Milk_Shaykh
  • 604
  • 1
  • 9
  • 22

2 Answers2

3

Likely, this is because conventional placeholder text doesn't make sense in a select element because you only have a predefined set of options to choose from. You can't edit the text in a select element like you can with an editable combo box in many desktop applications, but that's only because HTML simply does not provide an editable select element out of the box.

The select element implements "placeholders" by way of what the HTML5 spec calls a placeholder label option, which is described thusly:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

And it gives the following example:

Code Example:

The following example shows how a select element can be used to offer the user with a set of options from which the user can select a single option. The default option is preselected.

<p>
 <label for="unittype">Select unit type:</label>
 <select id="unittype" name="unittype">
  <option value="1"> Miner </option>
  <option value="2"> Puffer </option>
  <option value="3" selected> Snipey </option>
  <option value="4"> Max </option>
  <option value="5"> Firebot </option>
 </select>
</p>

When there is no default option, a placeholder can be used instead:

<select name="unittype" required>
 <option value=""> Select unit type </option>
 <option value="1"> Miner </option>
 <option value="2"> Puffer </option>
 <option value="3"> Snipey </option>
 <option value="4"> Max </option>
 <option value="5"> Firebot </option>
</select>

This idiom has in fact been in use since antiquity.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Ok I have accepted thanks for very complete answer. Just one quick question is it still not possible to center text in a select box? I read a post from 3 years ago which says this is not possible. http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box – Milk_Shaykh Dec 12 '15 at 05:26
1

Placeholder text will appear when the user didn't feed any value. selectbox, in this scenario the 1st option will appear when the user didn't enter a value. So we can use 1st <option> as placeholder text & place holder attribute is not required.

Milk_Shaykh
  • 604
  • 1
  • 9
  • 22
Manivannan
  • 3,074
  • 3
  • 21
  • 32