web-dev-qa-db-ja.com

選択した<option>に基づいてスタイル<select>要素

CSSのみで選択されたselectに基づいてoption要素をスタイルすることは可能ですか？既存の JavaScriptソリューション を認識しています。

オプション要素自体のスタイルを設定しようとしましたが、これにより、選択した要素ではなく、オプションのリスト内のオプション要素のみにスタイルが設定されます。

select[name="qa_contact"] option[value="3"] {
    background: orange;
}

http://jsfiddle.net/Aprillion/xSbhQ/

CSS 3では不可能な場合、 CSS 4サブジェクトセレクター は将来的に役立ちますか、またはこれはCSSに対して禁じられた成果を維持しますか？

cssparent-child
38
Aprillion

残念ながら、はい-これは現在CSSだけでは不可能なことです。 この質問 への回答とコメントで述べたように、現在、親要素が子供に基づいてスタイルを受け取るようにする方法はありません。

必要なことを行うには、基本的にchildren（<option>）のどれが選択されているかを検出し、それに応じて親のスタイルを設定する必要があります。

ただし、次のように非常に簡単なjQuery呼び出しでこれを実現できます。

[〜＃〜] html [〜＃〜]

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

[〜＃〜] css [〜＃〜]

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

working jsFiddle です。

セレクターの未来についての質問に戻ります。はい-「サブジェクト」セレクターは、あなたが述べたことを正確に行うことを意図しています。それらが実際に最新のブラウザーで実際に稼働する場合、上記のコードを以下に適合させることができます

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

補足として、!を主題の前に置くか後に置くかについてはまだ議論があります。これは!somethingのプログラミング標準に基づいており、「何か」ではありません。その結果、サブジェクトベースのCSSは実際には次のようになります。

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }
35
Troy Alford

だからここに私が見つけたものがあります可能であること。最大の問題は、要素を選択した後、選択した要素が実際に再描画されないため、背景色が変わらないことです（IE-go figure）。別のオプションを選択しても、選択要素をもう一度クリックしても、そのオプションはリストで強調表示されません。

IEの再描画の問題を修正するには、font-size最小量、+-。1。十分に文書化されていないように見えるもう1つのことは、擬似クラス:checkeddoesは、選択コントロールでも機能します。

fiddler は、それを可能にする追加のCSSを表示します。

ChromeおよびIE9、fyi。

編集：明らかに、特定のオプションを強調表示するために、[value = "x"]を目的の値に設定する必要があります。

2
Justin