[Proposal] The <select> element should support the placeholder attribute

HTML
1

The current method of adding a placeholder in your dropdown is to add the disabled, selected, and hidden attributes to one of the <option> elements in your <select> menu like so

<select>
  <option disabled selected hidden>Placeholder text</option>
  <option>First option</option>
  <option>Second Option</option>
</select>

This is a bit ugly, but more importantly it also breaks semantics a bit as the <option> element is not behaving as an option in a list, but as instructional text.

Instead I propose the placeholder attribute be added to the <select> element to serve this purpose. It would be shown before the user has selected any options and when no selected attribute is present on any of the <options> in the <select> menu. Perhaps it could have a lighter colored text similar to the placeholder for input elements, but I guess that’s more up to the user agent. Using this proposed attribute, the above code could be rewritten as follows:

<select placeholder="Placeholder text">
  <option>First option</option>
  <option>Second Option</option>
</select>

I welcome any input, would love to get some feedback, especially if there are any accessibility challenges with this.

2 Likes
2

The placeholder on select would not allow customization. Instead, proposing to apply it on option:

<select>
  <option placeholder>Placeholder text</option>
  <option>First option</option>
  <option>Second Option</option>
</select>

This way the styling would be customizable and JS/DOM model not changed.

When selection is in place, the placeholder is hidden. Otherwise( no selection) it would be only one visible and as such, chosen. Focus would trigger the visibility of other options enabling them for selection.

The polyfill can be done on CSS level I guess.

1 Like
3

Afaik there is no way to edit a select to add your own entry. Yet, it is something that exists in the library Qt and in swing in java ( if my memory isn’t betraying me ).

I think there are cases where you don’t want the user to enter a different value than the one proposed, but it is also something you may desire. The tag datalist associated with the tag input provides this kind of mechanism.

I don’t think the placeholder should be customizable, considering placeholders in other situations aren’t ( the placeholder in input is an attribute).

I think that it would make more sense to make the datalist browsable, as selects are. Especially because select can be used to select multiple options and I don’t see how to make sense of this placeholder in that situation.

Maybe an “input type=select” would solve the issue.