144

選択ボックスがあり、選択ボックスがクリックされてすべてのオプションが表示されたときに、オプションの背景色を変更しようとしています。

body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

select {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
<select>
  <option val="">Please choose</option>
  <option val="1">Option 1</option>
  <option val="2">Option 2</option>
  <option val="3">Option 3</option>
  <option val="4">Option 4</option>
</select>

4

10 に答える 10

190

タグじゃなくてタグつけれbackground-colorばいいのに…optionselect

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

各タグのスタイルを設定したい場合はoption、cssattributeセレクターを使用します。

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

于 2012-10-11T09:22:16.210 に答える
21

あなたがそれを考慮したかどうかはわかりませんが、アプリケーションがアイテムのさまざまなグループの色付けに基づいている場合は<optgroup>、さらに参照するためにクラスと組み合わせたタグを使用する必要があります。例えば：

<select>
    <optgroup label="Numbers" class="green">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </optgroup>

    <optgroup label="Letters" class="blue">
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </optgroup>
</select>

次に、ドキュメントの先頭に次のように css を記述します。

<style type="text/css">
    .green option{
        background-color:#0F0;
    }

    .blue option{
        background-color:#00F;
    }
</style>
于 2013-03-21T21:30:41.633 に答える
9

ここに画像の説明を入力

いくつかの回答に似ていますが、実際には述べられていませんが、実際のオプションタグにクラスを追加してcssクラスを使用することです...これは現在、IEで問題なく機能しています(上記のssを参照)。

<select id="reviewAction">
<option class="greenColor">Accept and Advance Status</option>
<option class="redColor">Return for Modifications</option>
</select>

CSS:

.greenColor{
    background-color: #33CC33;
}
.redColor{
    background-color: #E60000;
}
于 2013-10-08T21:21:52.777 に答える
2

スタイルに !important を追加するまで、私の選択は背景に色を付けません。

    input, select, select option{background-color:#FFE !important}
于 2016-07-28T19:26:46.730 に答える
2

別のオプションは、Javascript を使用することです。

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(CSS 属性セレクターほどきれいではありませんが、より強力です)

于 2012-10-11T20:53:09.177 に答える