html 选择选项分隔符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/899148/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html select option separator
提问by Phillip Senn
How do you make a separator in a select tag?
你如何在选择标签中制作分隔符？
New Window
New Tab
-----------
Save Page
------------
Exit
回答by Alex K
The disabled option approach seems to look the best and be the best supported. I've also included an example of using the optgroup.
禁用选项方法似乎看起来最好，并且得到了最好的支持。我还包含了一个使用 optgroup 的示例。
optgroup (this way kinda sucks):
optgroup（这种方式有点糟糕）：
<select>
<optgroup>
<option>First</option>
</optgroup>
<optgroup label="_________">
<option>Second</option>
<option>Third</option>
</optgroup>
</select>disabled option (a bit better):
禁用选项（更好一点）：
<select>
<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>
</select>And if you want to be really fancy, use the horizontal unicode box drawing character.
(BEST OPTION!)
如果你想变得很花哨，可以使用水平 unicode 框绘图字符。
（最佳选择！）
<select>
<option>First</option>
<option disabled>──────────</option>
<option>Second</option>
<option>Third</option>
</select>回答by Tina Orooji
Try:
尝试：
<optgroup label="----------"></optgroup>
回答by Dexter Blake
This is an old thread, but since no one posted a similar response, I'll add this as it's my preferred way of separation.
这是一个旧线程，但由于没有人发布类似的回复，我将添加它，因为这是我首选的分离方式。
I find using dashes and such to be somewhat of an eyesore since it could fall short of the width of the selection box. So, I prefer to use CSS to create my separators.. a simple background coloring.
我发现使用破折号等有点碍眼，因为它可能低于选择框的宽度。所以，我更喜欢使用 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> </option>
<option>Third</option>
<option>Fourth</option>
<option style="font-size: 1pt; background-color: #000000;" disabled> </option>
<option>Fifth</option>
<option>Sixth</option>
</select>回答by james.garriss
If you don't want to use the optgroup element, put the dashes in an option element instead and give it the disabled attribute. It will be visible, but greyed out.
如果您不想使用 optgroup 元素，请将破折号放在 option 元素中，并为其指定 disabled 属性。它将是可见的，但会变灰。
<option disabled>----------</option>
回答by user511941
Instead of the regular hyphon I replaced it using a horizontal bar symbol from the extended character set, it won't look very nice if the user is in another country that replaces that character but works fine for me. There is a range of different chacters you could use for some great effects and there is no css involved.
我使用扩展字符集中的水平条符号代替了常规连字符，如果用户在另一个国家/地区替换该字符但对我来说效果很好，它看起来不会很好。您可以使用一系列不同的字符来实现一些出色的效果，并且不涉及 CSS。
<option value='-' disabled>――――</option>
回答by Klaus Heyne
Define a class in CSS:
在 CSS 中定义一个类：
option.separator {
margin-top:8px;
border-top:1px solid #666;
padding:0;
}
Write in HTML:
用 HTML 编写：
<select ...>
<option disabled class="separator"></option>
</select>
回答by Noumenon
I'm making @Laurence Gonsalves' comment into an answer because it's the only one that works semantically and doesn't look like a hack.
我正在将@Laurence Gonsalves 的评论变成一个答案，因为它是唯一一个在语义上有效并且看起来不像黑客的评论。
Try adding this to your stylesheet:
尝试将其添加到您的样式表中：
optgroup + optgroup { border-top: 1px solid black }
Much less cheesy looking than a bunch of dashes.
看起来不像一堆破折号那么俗气。
回答by ebricca
another way is to use a css 1x1 background image on option which only seems to work with firefox and have a "----" fallback
另一种方法是在选项上使用 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;
}
or to use javascript (jquery) to:
或使用 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/
http://tutorialzine.com/2010/11/better-select-jquery-css3/
see also How do I add a horizontal line in a html select control?
另请参阅 如何在 html 选择控件中添加水平线？
回答by Jon
If it's WebKit-only, you can use <hr>to create a real separator.
如果它是 WebKit-only，你可以<hr>用来创建一个真正的分隔符。
回答by Tobi
You could use the em dash "—". It has no visible spaces between each character.
(In somefonts!)
In HTML:
您可以使用破折号“—”。每个字符之间没有可见的空格。
（在某些字体中！）
在 HTML 中：
<option value="—————————————" disabled>—————————————</option>
Or in XHTML:
或者在 XHTML 中：
<option value="—————————————" disabled="disabled">—————————————</option>
