風格<select>基於選定的元素<option>

是否可以根據僅用CSS選擇option的元素來設計select元素？我知道現有的JavaScript solutions。風格<select>基於選定的元素<option>

我嘗試設置選項元素本身的樣式，但這隻會給選項列表中的選項元素，而不是選定的元素。

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

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

如果無法與CSS 3，將在未來CSS 4 subject selector幫助 - 還是將留禁果的CSS？

來源

2013-05-02 Aprillion

我可以對你選擇的awnser提出異議，敬請關注。這是非常「黑客」 – Justin 2013-05-02 18:56:05

@Justin - 如果有更好的答案，我會改變接受的答案。但目前對我來說已經足夠了。 – Aprillion 2013-05-02 19:14:34

看看我的anwser，讓我知道它是否真的讓你的問題大聲笑。 – Justin 2013-05-02 20:05:50

不幸的是，這是目前只有CSS才能實現的功能。如在對this question的回答和評論中所述，目前沒有辦法使父母基於其子女接收造型。

爲了做你想做的事情，你基本上必須檢測哪個孩子（<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; }

來源

2013-05-02 18:29:57

jQuery的一部分 - 它應該檢查預選的選項以及onchange事件 – Aprillion 2013-05-02 19:23:37

是的，真的 - 我繼續前進並更新它以添加該內容 – 2013-05-02 23:09:20

我已經修改了這個'select.foo，option [value =「foo」] {background：red;}'在jsFiddle中改變背景顏色，當value =「」這個'select.foo，選項[value =「」] {background：red;}'但它不起作用。當值爲空時，背景顏色是什麼？ – VansFannel 2016-06-14 11:24:08

所以這是我在這發現是可能。最大的問題是，選擇一個元素後，背景顏色不會改變，因爲select元素實際上沒有重繪（在IE中似乎更具有可用性 - 請參閱圖）。因此，即使您選擇了其他選項，當您再次單擊select元素時，該選項在列表中也不會突出顯示。

要修復IE中的重畫問題，它需要將font-size更改爲最小量+ - 。1。另一件事似乎沒有很好的證明，那就是僞類:checkeddoes也適用於選擇控件。

fiddler顯示添加的CSS，使它成爲可能。

我只在Chrome和IE9上玩過它，fyi。

編輯：顯然，您需要將[value =「x」]設置爲所需的值，以便進行特定的選項突出顯示。

來源

2013-05-02 19:58:48 Justin

這對IE和Chrome很有用。根本不適用於Firefox或Opera。 – Aprillion 2013-05-02 21:58:22

@deathApril我沒有看歌劇，但它在Firefox中不工作實際上是[Firefox]（https://bugzilla.mozilla.org/show_bug.cgi?id=79107）中的一個錯誤。如果你看看應用的CSS，它實際上是在那裏大聲笑。在這種情況下，JavaScript將是必需的。 – Justin 2013-05-03 14:09:57

感謝您的錯誤鏈接，如果它自2001年以來不是固定的，我不相信在任何時候都能在Firefox中工作：（ – Aprillion 2013-05-03 14:38:54

風格<select>基於選定的元素<option>

回答

相關問題