如何让无JavaScript的datalist输入提示在Firefox中生效？

你的问题核心是Firefox与Chrome对<datalist>内<option>元素的解析逻辑存在差异：

• Chrome会将<option>标签内的文本作为显示提示，同时提交value属性的值，输入时也会匹配标签内的文本。
• Firefox默认只使用value属性的值作为显示内容和匹配依据，忽略标签内的文本。

针对这个差异，有两种无JS的解决方案：

方案1：使用label属性分离显示文本与提交值 #

如果你需要保持显示文本（如item1）和实际提交值（如pid1）的分离，可将显示文本放到label属性中，value保留实际提交值：

<input id="search" type="text" placeholder="Search..." list="item-list">
<datalist id="item-list">
    <option label="item1" value="pid1"></option>
    <option label="item2" value="pid2"></option>
    <option label="item3" value="pid3"></option>
</datalist>

这种写法在Firefox和Chrome中都会显示label的内容作为提示，输入时匹配label文本，提交时传递value的值，行为完全一致。

方案2：统一value与显示文本 #

如果不需要区分显示文本和提交值，直接将value设置为你想显示的提示文本即可：

<input id="search" type="text" placeholder="Search..." list="item-list">
<datalist id="item-list">
    <option value="item1"></option>
    <option value="item2"></option>
    <option value="item3"></option>
</datalist>

这种方式最简洁，适用于显示内容和提交内容一致的场景。

内容的提问来源于stack exchange，提问作者Fluxian