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

Question

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

Answer 1

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>

Answer 2

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

<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"。但是我不需要这个属性来解决上面的问题。

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

HTML Datalist shows extra options separated by horizontal line

html

datalist