如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
当前回答
我使用扩展字符集中的水平条符号代替常规的连字符,如果用户在替换该字符的另一个国家,那么它看起来不太好,但对我来说很好。有一个不同的字符范围,你可以使用一些伟大的效果,没有css涉及。
<option value='-' disabled>――――</option>
其他回答
如果只支持webkit,可以使用<hr>来创建真正的分隔符。
http://code.google.com/p/chromium/issues/detail?id=99534
以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>
另一种方法是在选项上使用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/
另请参阅 如何在html选择控件中添加水平线?
我们可以使用没有选项的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
Try:
<optgroup label="----------"></optgroup>