HTML選択オプションセパレータ

選択タグでセパレータをどのように作成しますか？

New Window
New Tab
-----------
Save Page
------------
Exit

無効にされたオプションのアプローチは、最高に見え、サポートされている最高のようです。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>

そして、あなたが本当に派手になりたいなら、水平のユニコードボックス描画文字を使用してください。
（ベストオプション！）

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

http://jsfiddle.net/JFDgH/2/

試してください：

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

これは古いスレッドですが、同様の応答を誰も投稿しなかったので、これを私の好みの分離方法として追加します。

ダッシュなどを使用すると、選択ボックスの幅を下回る可能性があるため、多少目障りだと思います。そのため、セパレータを作成するために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>

optgroup要素を使用したくない場合は、代わりにダッシュをoption要素に入れ、disabled属性を与えます。表示されますが、グレー表示されます。

<option disabled>----------</option>

通常のハイフォンの代わりに、拡張文字セットの水平バーシンボルを使用してそれを置き換えました。ユーザーがその文字を置き換える国にいるのに、私にとってはうまく機能する場合、見栄えがよくありません。いくつかの素晴らしい効果に使用できるさまざまな文字があり、CSSは含まれていません。

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

CSSでクラスを定義します。

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

HTMLで記述：

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

@Laurence Gonsalvesのコメントを答えにしています。これは、セマンティックに機能し、ハックのように見えない唯一のコメントだからです。

これをスタイルシートに追加してみてください：

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

ダッシュの束よりも安っぽく見えません。

別の方法は、Firefoxでのみ機能し、「----」フォールバックがあるように見えるオプションでcss 1x1背景画像を使用することです

<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選択コントロールに水平線を追加する方法も参照してください 。

WebKitのみの場合は、を使用<hr>して実際のセパレーターを作成できます。

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

emダッシュ「—」を使用できます。各文字の間に目に見えるスペースはありません。
（一部のフォントでは！）

HTMLの場合：

<option value = "—————————————"無効> ————————————— </ option>

またはXHTMLの場合：

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

これはいつも最高です。

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

 <option  data-divider="true" disabled>______________</option>

これもできます。簡単で、仕切りを選択してドロップダウンリストを選択できます。

私は条件付きで色と背景を交互に選択しました。並べ替え順序を設定し、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