HTML Datalist 显示由水平线分隔的额外选项答案

【问题标题】：HTML Datalist shows extra options separated by horizontal lineHTML Datalist 显示由水平线分隔的额外选项
【发布时间】：2018-01-19 10:09:46
【问题描述】：

我正在向 datalist 传递 10 个选项，这些选项在下拉列表中显示良好。但有时我会在选项列表底部获得更多由水平线分隔的选项（Chrome 可能正在缓存或重复显示某些选项）。我不明白为什么 chrome 显示这些额外的选项由水平线分隔

【问题讨论】：

标签： html datalist

【解决方案1】：

我浏览了互联网上与 datalist 相关的不同文章，我了解到 datalist 接受自动完成属性。它给了我一个提示，我得到的额外选项（可能是 - 以前的搜索、建议）可能是由于 datalist 的 autocomplete 功能，所以我尝试将其设置为“off强>”。现在我不再在选项列表中获得那些额外的选项和水平线了。例如。代码 sn-p -

<input list="browsers" autocomplete="off">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

我还发现了另一个 datalist 接受的属性，autocorrect="off"。但是我不需要这个属性来解决上述问题。

【讨论】：

【解决方案2】：

option.select-hr { border-bottom: 1px dotted #000; }

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

但一般来说，唯一的方法是用破折号放入一个选项，并尝试使其无法选择。

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled="disabled">----</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

【讨论】：

您好，感谢您的回答。我不确定它是否也适用于数据列表，但我会试一试
这个答案不是问题所在。问题不在于 - 如何添加额外的或虚线 - 而是关于为什么显示额外的线。