HTML选择选项分隔符

如何在选择标签中创建分隔符?

New Window
New Tab
-----------
Save Page
------------
Exit
204980 次浏览
小开

试一试:

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

如果不想使用optgroup元素，可以将破折号放在option元素中，并为其指定disabled属性。它将是可见的，但灰色。

<option disabled>----------</option>
小开

我使用扩展字符集中的水平条符号代替常规的连字符，如果用户在替换该字符的另一个国家，那么它看起来不太好，但对我来说很好。有一个不同的字符范围，你可以使用一些伟大的效果，没有css涉及。

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

另一种方法是在选项上使用css1x1背景图像，这似乎只适用于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/

< p >见也 如何在html选择控件中添加水平线? < / p >
小开

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

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

小开
你可以用破折号" - "每个字符之间没有可见的空格。
(在一些字体中!)

在HTML: < / >强

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

Or in XHTML:

<option value="—————————————" disabled="disabled">—————————————</option>
小开
最佳答案

禁用选项方法看起来是最好的，也得到了最好的支持。我还包含了一个使用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/

小开

定义一个CSS类:

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

用HTML编写:

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

这个总是最好的。

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

小开

这是我喜欢的分离方式。

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

小开

我把@Laurence Gonsalves的评论变成了一个答案，因为它是唯一一个在语义上起作用的，看起来不像一个黑客。

试着把这个添加到你的样式表中:

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

比一堆破折号好看多了。

小开

我选择有条件地交替颜色和背景。设置排序顺序，使用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
小开 
 <option  data-divider="true" disabled>______________</option>

你也可以做这个。这是很容易的，使分割线选择下拉列表。

小开

我们可以使用没有选项的optgroup标签

  • 可以设置字体大小: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

小开

以Jasneet的回答为基础

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

基本上，使用三个禁用选项来创建一个自然样式的分隔符。我选择了一条非常细的灰色线0.1px，垫高0.25em，因为我认为这样的组合看起来最自然:

Separator inside HTML select list .

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

这将解决你的问题:

<select>
<optgroup>
<option>New Window</option>
<option>New Tab</option>
</optgroup>
<optgroup label="_________">
<option>Save Page</option>
</optgroup>
<optgroup label="_________">
<option>Exit</option>
</optgroup>
</select>


提交答案