Question

如何在select标签中创建分隔符？

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

Answer 1

禁用选项方法似乎看起来最好并且是最好的支持。我还提供了使用optgroup的示例。

optgroup（这种方式很糟糕）：

＆＃13;

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

＆＃13;

禁用选项（好一点）：

＆＃13;

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

＆＃13;

如果您想要真正喜欢，请使用水平unicode框绘图字符。它很性感！
（最佳选择！）

＆＃13;

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

＆＃13;

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

Answer 2

尝试：

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

Answer 3

这是一个老线程，但由于没有人发布类似的回复，我会添加它，因为这是我喜欢的分离方式。

我发现使用破折号这样有点像眼睛因为它可能达不到选择框的宽度。所以，我更喜欢用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>

Answer 4

如果您不想使用optgroup元素，请将破折号放在选项元素中，并为其指定disabled属性。它会是可见的，但是会变灰。

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

Answer 5

我使用扩展字符集中的水平条符号代替常规的hyphon，如果用户在另一个国家替换该字符但对我来说工作正常，那么它看起来不会很好。有一系列不同的字符可以用于一些很好的效果，并且没有涉及到CSS。

<option value='-' disabled>――――</option>

Answer 6

在CSS中定义一个类：

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

用HTML写：

<select ...>
    <option disabled class="separator"></option>
</select>

Answer 7

我正在将@Laurence Gonsalves的评论写成答案，因为它是唯一一个在语义上有效并且看起来不像黑客的人。

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

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

看起来比一堆破折号低得多。

Answer 8

另一种方法是使用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/

另见 How do I add a horizontal line in a html select control?

Answer 9

如果它只是WebKit，您可以使用<hr>创建一个真正的分隔符。

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

Answer 10

您可以使用em破折号“ - ”。每个字符之间没有可见的空格。
（在一些字体！）中
在HTML中：

<option value="—————————————" disabled>—————————————</option>

或者在XHTML中：

<option value="—————————————" disabled="disabled">—————————————</option>

Answer 11

这是最好的。

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

Answer 12

 <option  data-divider="true" disabled>______________</option>

你也可以这样做。它很容易，并使分隔符选择下拉列表。

Answer 13

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

Answer 14

我们可以使用不带选项的optgroup标记

可以设置font-size：1px以最小化高度，并且
一些漂亮的背景

.divider {
  font-size: 1px;
  background: rgba(0, 0, 0, 0.5);
}

.divider--danger {
  background: red;
}

<select>
  <option value="option1">option 1 key data</option>
  <option value="option2">option 2 key data</option>
  <optgroup class="divider"></optgroup>
  <option value="option3">option 3 key data</option>
  <option value="option4">option 4 key data</option>
</select>

<select>
  <option value="option1">option 1 key data</option>
  <option value="option2">option 2 key data</option>
  <optgroup class="divider divider--danger"></optgroup>
  <option value="option3">option 3 key data</option>
  <option value="option4">option 4 key data</option>
</select>

Codepen.io：https://codepen.io/JasneetDua/pen/yLOYwaV?editors=1100

html选择选项分隔符

14 个答案: