html - 如何在 html 选择控件中添加水平线？

Question

如何在 HTML 的下拉控件或选择控件中添加水平线(<hr> 标记)？

Answer 1

一般来说，这不是<select> 的特性。 ，大多数浏览器对该控件的样式控制非常差。在 Firefox 中，您可以执行以下操作(但在其他浏览器中不起作用):

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

使用 CSS:

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

但一般来说，唯一的办法就是把一个选项用破折号括起来，尽量让它不可选择。

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

参见:http://jsfiddle.net/qM5BA/283/