How to display label attributes of html5 datalist tags

Question

In other modern browsers, you can use the label attribute on the html5 datalist tag to see its contents, but Edge always shows only the value attribute.

html
  <input type="text" list="color-list" placeholder="select color">
  <datalist id="color-list">
    <option value="f00" label="Red"></option>
    <option value="0f0" label="Green"></option>
    <option value="00f" label="Blue"></option>
  </datalist>

As with any browser, once the label attribute is displayed and selected in the dropdown, you need to set the ID in the input tag.

For example, if "Red" is displayed, I want "f00" to be set.

Answer 1

Hi @小笠原 清一 ,

This behavior depends on the browsers. It's by design. It's known that different browsers have different behavior about this. You can check this thread.

As a workaround, you can refer to this code sample. You can store the actual value in the data-value and store the lable in the value. By this way it is giving same result in Chrome and Edge.

If you want exactly showing both label and value on Edge, I think you can only pull a feature request by sending feedback(Alt+Shift+I) in Edge. We can do nothing at the code side.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Regards,
Yu Zhou