オプションとoptgroupの間のスペースを削除してください

Question

私はいくつかのオプションとoptgroupがある選択ドロップダウンを持っています。 optgroupのというラベルを使用したくありません。私が空にするかoptgroupの属性として言及しない場合は、optgroupとoption要素の間に空白があります。それを削除する方法はありますか？ここにそれのためのjsfiddleがあります。

<select> 
 
    <option>Category 1</option> 
 
    <optgroup> 
 
     <option>a</option> 
 
     <option>b</option> 
 
    </optgroup> 
 
    <option>Category 2</option> 
 
    <optgroup> 
 
     <option>c</option> 
 
     <option>d</option> 
 
    </optgroup> 
 
</select>

私は 'カテゴリー1' と 'A'、 'カテゴリー2' と 'C' の間にスペースを削除します。

注：私はドロップダウンリストのランダムな名前を使用します。それらは私のプロジェクトでは異なります。ユーザーはカテゴリも選択できます。ラベルとしてカテゴリを作成すると、それをさらに選択することはできません。だから解決策は、CSSなどを変更する必要があります

Answer 1

実際には<option>タグにグループ見出しを設定しています。あなたは以下のようにコードを変更する必要があります。

<select> 
    <optgroup label="Category 1"> 
     <option>a</option> 
     <option>b</option> 
    </optgroup> 
    <optgroup label="Category 2"> 
     <option>c</option> 
     <option>d</option> 
    </optgroup> 
</select> 

をそして、あなたは、これはあなたによると、あなたはjqueryの

選ばに基づいていくつかの選択のプラグインを使用する必要がありますスタイルにしたい場合：Chosen plugin

ブートストラップを選択：Bootstrap Select Plugin

Answer 2

また、このようなダム解決策を考えることもできます。それは面白さです。シンプルで機能します。欠点は：あなたが絶対何らかの理由でそれらを必要とするならば、それは悪い練習と呼ばれ、オプトグループには関係しない人もいます。あなたにもカテゴリを選択できるようにしたい場合は、私は次のように助言する

<select> 
 
    <option>Category 1</option> 
 
    <option>&emsp;a</option> 
 
    <option>&emsp;b</option> 
 
    <option>Category 2</option> 
 
    <option>&emsp;a</option> 
 
    <option>&emsp;b</option> 
 
</select>

Answer 3

：

<select> 
 
    <option>-- please select -- 
 
    <optgroup label="Category 1"> 
 
    <option>All 
 
    <option>a 
 
    <option>b 
 
    <optgroup label="Category 2"> 
 
    <option>All 
 
    <option>c 
 
    <option>d 
 
</select>

Answer 4

あなたのスタイルシートにこれを追加ここでは、ラベルを使用していない場合は、強制的にSumoSelect CSSを更新しています。これは適切です。

.SumoSelect > .optWrapper > .options li.group > label{padding: 0px 0px !important;}