blocks|key|1334907|text|禁用选项方法似乎看起来是最好的，也是最受支持的。我还提供了一个使用optgroup的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334908|optgroup+(这种方式有点糟糕)：|1334909|​|1334910|<select>
++++<optgroup>
++++++++<option>First</option>
++++</optgroup>
++++<optgroup+label="_________">
++++++++<option>Second</option>
++++++++<option>Third</option>
++++</optgroup>
</select>|code-block|syntax|javascript|1334911|1334912|禁用选项(更好一点)：|1334913|1334914|<select>
++++<option>First</option>
++++<option+disabled>_________</option>
++++<option>Second</option>
++++<option>Third</option>
</select>|1334915|1334916|如果你真的想变得花哨，那就使用水平unicode框来绘制字符。|1334917|(最佳选择！)|1334918|1334919|<select>
++++<option>First</option>
++++<option+disabled>──────────</option>
++++<option>Second</option>
++++<option>Third</option>
</select>|1334920|1334921|http://jsfiddle.net/JFDgH/2/|offset|length|1334922|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|1D|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|E|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|H|7|1H|8|@]|9|@]|A|$I|J]]|$1|Q|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|E|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|H|7|1M|8|@]|9|@]|A|$I|J]]|$1|Y|3|E|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1O|8|@]|9|@$11|1P|12|1Q|1|1R]]|A|$]]|$1|13|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|14|$15|$5|16|17|18|A|$19|10]]]]

<p>The disabled option approach seems to look the best and be the best supported. I've also included an example of using the optgroup.</p>

<p>optgroup (this way kinda sucks):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;optgroup&gt;
        &lt;option&gt;First&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="_________"&gt;
        &lt;option&gt;Second&lt;/option&gt;
        &lt;option&gt;Third&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>disabled option (a bit better):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option&gt;First&lt;/option&gt;
    &lt;option disabled&gt;_________&lt;/option&gt;
    &lt;option&gt;Second&lt;/option&gt;
    &lt;option&gt;Third&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>And if you want to be really fancy, use the horizontal unicode box drawing character.
<br>(BEST OPTION!)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
    &lt;option&gt;First&lt;/option&gt;
    &lt;option disabled&gt;──────────&lt;/option&gt;
    &lt;option&gt;Second&lt;/option&gt;
    &lt;option&gt;Third&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p><a href="http://jsfiddle.net/JFDgH/2/" rel="noreferrer">http://jsfiddle.net/JFDgH/2/</a></p>


blocks|key|1550135|text|尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550136|<optgroup+label="----------"></optgroup>|code-block|syntax|javascript|1550137|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try:</p>

<pre><code>&lt;optgroup label="----------"&gt;&lt;/optgroup&gt;
</code></pre>


blocks|key|1550540|text|这是一个旧的线程，但由于没有人发布类似的响应，因此我将添加此内容，因为这是我首选的分离方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550541|我发现使用破折号之类的东西有点难看，因为它可能会比选择框的宽度小。因此，我更喜欢使用CSS来创建分隔符。一个简单的背景着色。|1550542|​|1550543|<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>|code-block|syntax|javascript|1550544|1550545|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>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.</p>

<p>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.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select&gt;
  &lt;option style="background-color: #cccccc;" disabled selected&gt;Select An Option&lt;/option&gt;
  &lt;option&gt;First Option&lt;/option&gt;
  &lt;option&gt;Second&lt;/option&gt;
  &lt;option style="font-size: 1pt; background-color: #000000;" disabled&gt;&amp;nbsp;&lt;/option&gt;
  &lt;option&gt;Third&lt;/option&gt;
  &lt;option&gt;Fourth&lt;/option&gt;
  &lt;option style="font-size: 1pt; background-color: #000000;" disabled&gt;&amp;nbsp;&lt;/option&gt;
  &lt;option&gt;Fifth&lt;/option&gt;
  &lt;option&gt;Sixth&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1334724|text|如果您不想使用optgroup元素，请将破折号放在一个option元素中，并为其提供disabled属性。它将可见，但呈灰色显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334725|<option+disabled>----------</option>|code-block|syntax|javascript|1334726|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.  </p>

<pre><code>&lt;option disabled&gt;----------&lt;/option&gt;
</code></pre>


blocks|key|1334791|text|我用扩展字符集中的水平条形符号代替了常规的连字符，如果用户在另一个国家替换了那个字符，它看起来不会很好，但对我来说很好。有一系列不同的字符，你可以用来实现一些很好的效果，而且不涉及css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334792|<option+value='-'+disabled>――――</option>|code-block|syntax|javascript|1334793|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>&lt;option value='-' disabled&gt;――――&lt;/option&gt;
</code></pre>


blocks|key|1334978|text|在CSS中定义一个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1334979|option.separator+{
++++margin-top:8px;
++++border-top:1px+solid+#666;
++++padding:0;
}|code-block|syntax|javascript|1334980|用HTML编写：|1334981|<select+...>
++++<option+disabled+class="separator"></option>
</select>|1334982|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Define a class in CSS:</p>

<pre><code>option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}
</code></pre>

<p>Write in HTML:</p>

<pre><code>&lt;select ...&gt;
    &lt;option disabled class="separator"&gt;&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|1550592|text|我将@Laurence+Gonsalves的评论转化为答案，因为它是唯一一个在语义上有效且看起来不像黑客的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550593|尝试将此代码添加到样式表中：|1550594|optgroup+%2B+optgroup+{+border-top:+1px+solid+black+}+|code-block|syntax|javascript|1550595|比起一堆破折号看起来不那么俗气。|1550596|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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.</p>

<p>Try adding this to your stylesheet:   </p>

<pre><code>optgroup + optgroup { border-top: 1px solid black } 
</code></pre>

<p>Much less cheesy looking than a bunch of dashes.</p>


blocks|key|1334828|text|如果它是纯WebKit的，你可以使用<hr>创建一个真正的分隔符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1334829|http://code.google.com/p/chromium/issues/detail?id=99534|1334830|entityMap|0|LINK|mutability|MUTABLE|url^0|I|4|0|0|1K|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@$9|S|A|T|1|U]]|E|$]]|$1|H|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|G]]]]

<p>If it's WebKit-only, you can use <code>&lt;hr&gt;</code> to create a real separator.</p>

<p><a href="http://code.google.com/p/chromium/issues/detail?id=99534" rel="nofollow noreferrer">http://code.google.com/p/chromium/issues/detail?id=99534</a></p>


blocks|key|1550482|text|这个总是最好的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1550483|​|1550484|<option>First</option>
<option+disabled>_________</option>
<option>Second</option>
<option>Third</option>|code-block|syntax|javascript|1550485|1550486|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>This one is best always.</p>

<p></p>

<pre><code>&lt;option&gt;First&lt;/option&gt;
&lt;option disabled&gt;_________&lt;/option&gt;
&lt;option&gt;Second&lt;/option&gt;
&lt;option&gt;Third&lt;/option&gt;
</code></pre>

<p></p>


blocks|key|1550665|text|+<option++data-divider="true"+disabled>______________</option>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1550666|你也可以做这个。这是很容易和使分隔线选择下拉列表。|unstyled|1550667|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code> &lt;option  data-divider="true" disabled&gt;______________&lt;/option&gt;
</code></pre>

<p>you can do this one also. it is easy and make divider select drop down list.</p>


blocks|key|1335125|text|我选择了有条件地替换颜色和背景。通过设置排序顺序和使用vue.js，我做了如下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1335126|<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|code-block|syntax|javascript|1335127|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I elected to conditionally alternate color and background.  Setting a sort order and with vue.js, I did something like this:</p>

<pre><code>&lt;style&gt;
    .altgroup_1 {background:gray; color:white;}
    .altgroup_2{background:white; color:black;}
&lt;/style&gt;

&lt;option :class = {
    'altgroup_1': (country.sort_order &gt; 25),
    'altgroup_2': (country.sort_order &gt; 50 }"
    value="{{ country.iso_short }}"&gt;
    {{ country.short_name }}
&lt;/option
</code></pre>


<p>How do you make a separator in a select tag?</p>

<pre><code>New Window
New Tab
-----------
Save Page
------------
Exit
</code></pre>


html select option separator

如何在select标记中创建分隔符？New WindowNew Tab-----------Save Page------------Exit

问html选择选项分隔符
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html选择选项分隔符EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问html选择选项分隔符
EN