web-dev-qa-db-ja.com

<select>の<optgroup>ラベルのスタイルを変更するにはどうすればよいですか？

アプリケーションにオプショングループを含む単純な選択ボックスがあります。

<select>
   <optgroup label="Swedish Cars">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
   </optgroup>
   ----
   ----
   ----
</select>

ブラウザに表示されると、オプショングループラベルは太字および斜体で表示されます。それらのスタイルなしで表示したいです。

htmlcssstyling
14
Gnanz

残念ながら、セレクトボックスは、CSSでほとんどスタイルを追加できない数少ないものの1つです。通常、ブラウザによるレンダリングに制限されます。

たとえば、Chromeでは次のようになります。

enter image description here

そしてこれはFirefoxで：

enter image description here

13
wesbos

ほとんどのブラウザー（最新IEおよびFFでテスト済み）では、CSSのみを使用してoptgroupのラベルを簡単に変更できます。

    select optgroup{
    background:#000;
    color:#fff;
    font-style:normal;
    font-weight:normal;
    }

もちろん、select htmlタグの代わりに任意のクラス名を設定できます。

ちなみに、他の回答が言っているように、選択ボックスで使用するCSSオプションはまだほとんどなく、多くのWebマスターはuser949847で指定されたメソッドを使用してそれらをオーバーライドします。しかし、上記のこのコードはニーズに一致するのに十分なはずです。

13
Helrik

Firefoxは、このルールを使用してラベルをスタイルします。

optgroup:before {
    content: attr(label);
    display: block;
}

上書きできます。

7
nniico
<style>
.select2-container--bootstrap .select2-results__group {
    color: inherit;
    font-size: inherit;
    font-weight:bold;
    padding: 6px 4px;
}
0
Mauro Trevisan

Optgroupのスタイリングに関する問題を回避する別のアプローチについては、無効なオプションを使用することをお勧めします。

<option disabled>[group label]</option>

あなたは、例えば、それを介してそれをスタイリングする上でショットを持つことができます。

<style> [disabled] { color:#000; background-color:#CCC } </style>
0
Risingson

CSSのみを使用して選択ボックスのスタイルを設定できます。これには次のような回避策が必要です。

まず、divで囲み、クラスを指定します。

<div class="selectStyle">
    <select>
        <option>First Option</option>
        <option>Second Option</option>
    </select>
</div>

次に、cssを使用して、select要素が特定の方法でスタイル設定されていることを確認します。

.selectStyle select {
   background: transparent;
   width: 250px;
   padding: 4px;
   font-size: 1em;
   border: 1px solid #ddd;
   height: 25px;
}

そして、あなたはdivをスタイルします：

.selectStyle {
   width: 235px;
   height: 25px;
   overflow: hidden;
   background: url(yourArrow.png) no-repeat right #ccc;
}
0
user949847

<optgroup>次のようなFirefox専用のラベル

optgroup[label] {
   color: grey;
   font-style: inherit;
   font-weight: 300;
   text-shadow: none
}
0
Alexander Schmidt