如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
如何在选择标签中创建分隔符?
New Window
New Tab
-----------
Save Page
------------
Exit
当前回答
我们可以使用没有选项的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>
<option data-divider="true" disabled>______________</option>
你也可以做这个。这是很容易的,使分割线选择下拉列表。
这是我喜欢的分离方式。
我发现使用破折号之类的东西有点碍眼,因为它可能达不到选择框的宽度。所以,我更喜欢使用CSS来创建我的分隔符..一个简单的背景着色。
选择< > <option style=“背景-颜色:#cccccc;”取消选择>选择选项</option> <选项第一选项< - >选项> <选项第二< - >选项> <option style=“font-size: 1pt;背景色:000000;“disabled> </option> <第三选项> < /选项> <选项第四< - >选项> <option style=“font-size: 1pt;背景色:000000;“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/
另请参阅 如何在html选择控件中添加水平线?
我把@Laurence Gonsalves的评论变成了一个答案,因为它是唯一一个在语义上起作用的,看起来不像一个黑客。
试着把这个添加到你的样式表中:
optgroup + optgroup { border-top: 1px solid black }
比一堆破折号好看多了。