HTML5数据列表无法在不同的浏览器中显示相同的信息

如何解决HTML5数据列表无法在不同的浏览器中显示相同的信息

我为Angular组件创建了以下数据列表：

<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">

但是，它在三种主要浏览器之间的显示完全不同。

在Chrome中，它会显示值和选项之间的文本：

在Firefox中，它显示选项之间的文本：

在Edge（铬）中，它仅显示值：

我希望它同时显示值和文本。 Firefox至少显示一些有用的信息的地方是Edge（铬）表示它完全无用的方式。

有没有一种方法可以使整个浏览器获得一致的体验，或者所有浏览器至少显示与chrome显示相同的信息？