HTML Datalist显示由水平线

Question

我正在向datalist传递10个选项，这些选项在下拉列表中显示正常。 但有时候我会在选项列表底部用水平线分隔几个选项（Chrome可能会缓存或显示一些重复的选项）。我无法理解为什么chrome显示这些由水平线分隔的额外选项

Answer 1

我浏览了与datalist相关的互联网上的不同文章，我发现datalist接受自动完成属性。它给了我一个暗示，我得到的额外选项（可能是 - 以前的搜索，建议）可能是由于datalist的自动完成功能，所以我尝试将其设置为＆＃34; 关闭＆＃34 ;. 现在我不再在选项列表中获得那些额外选项和水平线。 例如。代码段 -

<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 =＆＃34; off＆＃34;。但我不需要这个属性来解决上述问题。

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