2012-12-13 75 views
3
<select name="" id="gender" name ="gender" class="genderClass"> 
<option value="0">Please select gender</option> 
<option value="1">Male</option> 
<option value="2">Female</option> 
</select> 

給不同的背景顏色以選擇標籤選項這是類:如何在懸停

.genderClass:hover 
{ 
    background: gray; 
} 

目前mouseoverselect標籤給我灰色。但是當打開標籤和選項時,我怎樣才能將background-color設置爲選項,而我在mouseover就可以。即。如果我將鼠標移動到女性option,則應將background-color更改爲灰色。 我該怎麼做?

jsfiddle link

+0

你可以把它放在小提琴 –

+0

'.genderClass:hover option {...}'? – sp00m

+1

重複.... http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript – bobthyasian

回答

3

我認爲你不能只使用css,但使用javascript你可以使用自定義選擇來實現它。如果你使用jQuery,那麼下面是你可能喜歡的兩個插件的例子。

  1. Sparkbox Custom-Selectbox and an example here
  2. jQuery custom selectboxesan example here.

您也可以找到,如果你在谷歌搜索like this one更多。

+0

除了jquery-1.8.2.min.js我應該包括什麼AI文件在html頁面中工作。 **對象[對象對象]沒有方法'選擇框'**行錯誤$(function(){$(「。sparkbox-custom」)。selectbox();'當我在html頁面中嘗試這個時 – Reshma

+0

我喜歡這個頁面[google鏈接](http://lab.aspektas.com/select/select.html),它們用ul標籤替換select。謝謝你建議谷歌鏈接 – Reshma

0

沒有指定所選擇的選項,以改變其背景顏色的方法。對選擇標籤或選項標籤應用背景會改變整個選擇(除選定條目外)或除選定條目外的所有選項的背景。

我相信可以改變所選條目背景的顏色的唯一方法是通過您在計算機上的操作系統中定義的主題,並且這隻會爲您更改,而不會更改您的訪問者。