html选择选项分隔符

如何在选择标签中制作分隔符？

New Window
New Tab
-----------
Save Page
------------
Exit

禁用的选项方法看起来最好，并且得到最好的支持。我还提供了一个使用optgroup的示例。

optgroup（这种方式有点烂）：

<select>
    <optgroup>
        <option>First</option>
    </optgroup>
    <optgroup label="_________">
        <option>Second</option>
        <option>Third</option>
    </optgroup>
</select>

禁用选项（好一点）：

<select>
    <option>First</option>
    <option disabled>_________</option>
    <option>Second</option>
    <option>Third</option>
</select>

如果您真的想花哨的话，请使用水平unicode框绘图字符。
（最佳选择！）

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

http://jsfiddle.net/JFDgH/2/

尝试：

<optgroup label="----------"></optgroup>

这是一个旧线程，但是由于没有人发布过类似的回复，因此我将其添加为因为它是我偏爱的分离方式。

我发现使用破折号之类的东西有点令人讨厌，因为它可能不足选择框的宽度。因此，我更喜欢使用CSS创建分隔符。

<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>&nbsp;</option>
  <option>Third</option>
  <option>Fourth</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Fifth</option>
  <option>Sixth</option>
</select>

如果您不想使用optgroup元素，请将破折号放到option元素中，然后将其赋予Disabled属性。它将可见，但显示为灰色。

<option disabled>----------</option>

我不是使用普通字符，而是使用扩展字符集中的横杠符号来替换它，如果用户在另一个替换该字符但对我而言正常的国家中，它看起来不会很好。您可以使用各种不同的chacter来获得出色的效果，并且不涉及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>

我将@Laurence Gonsalves的评论作为答案，因为它是唯一在语义上有效并且看起来不像hack的评论。

尝试将其添加到样式表中：

optgroup + optgroup { border-top: 1px solid black } 

俗气的样子比一堆破折号要少得多。

另一种方法是在选项上使用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;
}

http://jsfiddle.net/yNecQ/6/

或使用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/

另请参见 如何在html select控件中添加水平线？

如果仅使用WebKit，则可以<hr>用来创建真正的分隔符。

http://code.google.com/p/chromium/issues/detail?id=99534

您可以使用破折号“ —”。每个字符之间没有可见的空格。
（使用某些字体！）

在HTML中：

<option value =“ —————————————“已禁用”> ———————————— </ 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>

您也可以做到这一点。这很容易，使分频器选择下拉列表。

我选择有条件地改变颜色和背景。设置排序顺序，并使用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