htmlselect选项分隔符
你如何做一个select标签分隔符？
New Window New Tab ----------- Save Page ------------ Exit 残疾人select办法似乎看起来是最好的，是最好的支持。 我还包括了一个使用optgroup的例子。
optgroup（这种方式有点糟糕）：
<select> <optgroup> <option>First</option> </optgroup> <optgroup label="_________"> <option>Second</option> <option>Third</option> </optgroup> </select>
尝试：
<optgroup label="----------"></optgroup>
如果您不想使用optgroup元素，请将短划线放在选项元素中，然后为其指定disabled属性。 这将是可见的，但灰色。
<option disabled>----------</option>
这是一个古老的线程，但由于没有人发布类似的回应，我将添加这个，因为这是我的首选分离方式。
我发现使用短划线是有点不舒服，因为它可能不足select框的宽度。 所以，我更喜欢使用CSS来创build我的分隔符..一个简单的背景色。
<select> <option style="background-color: #cccccc;" disabled selected>Select An Option</option> <option>First Option</option> <option>Second</option> <option style="font-size: 1pt; background-color: #000000;" disabled> </option> <option>Third</option> <option>Fourth</option> <option style="font-size: 1pt; background-color: #000000;" disabled> </option> <option>Fifth</option> <option>Sixth</option> </select>
而不是常规的hyphon，我使用扩展字符集中的水平条符号代替了它，如果用户在另一个国家replace了这个字符，但对我来说工作正常，它将不会很好看。 有一系列不同的特性可以用来产生一些很好的效果，而且没有css参与。
<option value='-' disabled>――――</option>
在CSS中定义一个类：
option.separator { margin-top:8px; border-top:1px solid #666; padding:0; }
用HTML编写：
<select ...> <option disabled class="separator"></option> </select>
另一种方法是在选项上使用一个CSS 1X1背景图像，这似乎只与Firefox一起使用，并有一个“—-”后备
<option value="" disabled="disabled" class="SelectSeparator">----</option> .SelectSeparator { background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==); color:black; background-repeat:repeat-x; background-position:50% 50%; background-attachment:scroll; }
或使用JavaScript（jQuery）来：
-hide the select element and -show a div which can be completely styled and -reflect the div state onto the select for the form submit
http://tutorialzine.com/2010/11/better-select-jquery-css3/
另请参阅如何在htmlselect控件中添加水平线？
如果它只是WebKit，您可以使用<hr>创build一个真正的分隔符。
我将@Laurence Gonsalves的评论变成了一个答案，因为它是唯一一个在语义上起作用的，看起来不像黑客。
尝试添加到您的样式表：
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号less得多俗气。
你可以使用破折号“ – ”。 每个字符之间没有可见的空格。
（在一些字体！）
在HTML中：
<option value =“-------------”disabled> ------------- </ option>
或者在XHTML中：
<option value =“-------------”disabled =“disabled”> ------------- </ option>
这个是最好的。
<option>First</option> <option disabled>_________</option> <option>Second</option> <option>Third</option>
<option data-divider="true" disabled>______________</option>
你也可以做到这一点。 这很容易，使分区select下拉列表。
我select有条件地交替颜色和背景。 设置sorting顺序和vue.js，我做了这样的事情：
<style> .altgroup_1 {background:gray; color:white;} .altgroup_2{background:white; color:black;} </style> <option :class = { 'altgroup_1': (country.sort_order > 25), 'altgroup_2': (country.sort_order > 50 }" value="{{ country.iso_short }}"> {{ country.short_name }} </option
