4

I have created the following datalist for an Angular component:

<input list="products" name="product">
<datalist id="products">
    <option value="10012312310">Water</option>
    <option value="10012312311">Mineral Water</option>
    <option value="10012312312">Filtered Water</option>
    <option value="10012312313">H2O</option>
</datalist>
<input type="submit">

However, it is displayed completely different between the 3 major browsers.

In Chrome it displays the value and the text between the options:

https://i.stack.imgur.com/nmDAx.png

In Firefox it displays the text between the options:

https://i.stack.imgur.com/jVdOf.png

In Edge (Chromium), it only displays the value:

https://i.imgur.com/80CCpBu.png

I want it to display both the value and the text. Where Firefox at least displays some useful information is the way Edge (chromium) represents it completely useless.

Is there a way I can make it so the experience is consistent across browser, or all browsers at least display the same information as chrome is displaying it?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Dr. Banana
  • 435
  • 1
  • 7
  • 16
  • 3
    Consistency... between browsers? lol. – Dai Aug 21 '20 at 12:40
  • 2
    In all seriousness - use the `label=""`attribute in addition to the `value=""` attribute and remove the text-content of your ` – Dai Aug 21 '20 at 12:40
  • Does this answer your question? [Show datalist labels but submit the actual value](https://stackoverflow.com/questions/29882361/show-datalist-labels-but-submit-the-actual-value) – Simone Rossaini Aug 21 '20 at 12:53
  • @Dai So it's working better now, however edge (chromium) still only displays the value. However, it will filter the list based on the label content. It just doesn't display the label content. Got any suggestion for that? – Dr. Banana Aug 31 '20 at 14:47

0 Answers0