2012-02-16 32 views
6

我周圍很多搜查,見人提示:我是否可以使用CSS爲HTML選擇選項中的選定項目背景着色?

::-moz-selection {background: red;} 
::selection {background: red; } 

..works着色當前選定項的背景多選擇表單項。 (注意:我的意思是選擇的項目,而不是焦點項目)。

我不能得到這個工作。我做錯了嗎?

#dropdowns select::selection { 
    background: red; 
} 

乾杯:/

設置:使用Chrome的Mac

+0

類似:http://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements – BoltClock 2012-02-16 11:15:15

回答

23

而不是隻設置背景顏色,你還可以設置一個線性漸變作爲背景:

option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

這個工作在IE11和最新的Chrome和Firefox。 Safari只是忽略它。沒有測試IE/Edge。

如果你想設置背景顏色只爲重點的多選擇,你可以使用這個片斷:

select[multiple]:focus option:checked { 
    background: red linear-gradient(0deg, red 0%, red 100%); 
} 

看到完整的演示在這裏:http://codepen.io/marceltschopp/pen/PNyqKp

+2

我認爲這應該是選定的答案。 – 2016-09-30 19:35:23

+0

因此顯然你只能用圖像替換默認的高亮顏色而不是不同的顏色?有意義... – BoltClock 2017-04-19 04:42:36

+1

這對Microsoft Edge有效。 「IE/Edge」通常指IE11上的邊緣模式,與IE11相同。如果您想談論新的瀏覽器,請將其稱爲「Microsoft Edge」或「Edge」,但不要將其稱爲IE。它不是IE。 – BoltClock 2017-04-19 04:43:24

2

::selection並不適用於選定的選項;它適用於突出顯示的文本。要麼你誤解了他們的建議,要麼他們說的是錯誤的。

this answer,你應該能夠使用option:checked的造型所選項目:

#dropdowns option:checked { 
    background: red; 
} 

但我一直沒能得到它爲this test fiddle<select><select multiple>元素工作。

+0

嗨,謝謝你編輯之前我有機會告訴你它沒有工作:) - 奇怪!謝謝你的小提琴。如果你看到你在這裏修改,我會看到[精選]的作品:http://jsfiddle.net/vzDvK/1/ - 奇怪的結果,但你可以看看嗎? – 2012-02-16 11:08:57

+2

@Mere開發:您可以使用'[selected]'而不是':checked',但它僅適用於加載頁面時選擇的選項(因爲它是屬性選擇器)。如果更改選擇,樣式將不會更新。 – BoltClock 2012-02-16 11:11:35

+0

好的,謝謝你的支持!所以我們這樣說:檢查只是由於某種原因不適用於選項(引用您的原始jsfiddle)?你認爲這是一個錯誤? – 2012-02-16 11:35:52

0

我發現這一點,因爲我是有這個同樣的問題,我確實發現了一個奇怪的解決方案,似乎至少可以用鉻和其他工作。解決方案是使用屬性選擇器。這似乎與鉻合作,我在js小提琴中測試它。一個側面說明,該框沒有立即改變顏色到背景紅色,但一旦我選擇了另一個選項,我可以清楚地看到它確實變成了紅色。你可以在上面列出的jsfiddle中查看它。

http://jsfiddle.net/vzDvK/1/

#dropdowns option[selected] { 
    background: red; 
} 
相關問題