html选择选项分隔符

Question

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

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

Answer 1

禁用选项方法似乎看起来最好,并且是最好的支持.我还提供了使用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/

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

您可以使用<hr>创建一个真正的分隔符：

<select>
    <option>Option 1-A</option>
    <option>Option 1-B</option>
    <hr>
    <option>Option 2-A</option>
    <option>Option 2-B</option>
    <option>Option 2-C</option>
    <hr>
    <option>Option 3-A</option>
</select>

有关浏览器兼容性，请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr#browser_compatibility<select>中的行。

Answer 7

在CSS中定义一个类:

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

用HTML写的:

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

Answer 8

以 Jasneet 的答案为基础：

• 将禁用选项的背景设置为灰色 (Jasneet)
• 在上方和下方添加禁用选项以填充分隔符

基本上，使用三个禁用选项来制作一个自然风格的分隔符。我选择了一条非常细的 0.1px 灰线和 0.25em 的焊盘高度，因为我认为这种组合看起来最自然：

<select>
  <option :value="item1">Item 1</option>
  <option disabled style="font-size: 0.25em;"></option>
  <option disabled style="background: #c9c9c9; font-size: 0.1px;"></option>
  <option disabled style="font-size: 0.25em;"></option>
  <option :value="item2">Item 2</option>
</select>

Answer 9

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

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

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

看起来不像一堆破折号那么俗气。