使用CSS的樣式選擇選項

Question

我正在嘗試使用CSS設置選擇選項列表的樣式。 我希望在列表的各個時間之間進行更多填充，因為看起來好像擠在一起了。 我嘗試將填充添加到option元素，但這似乎不起作用。 有任何想法嗎？

這是我的代碼

HTML

<select name="secondSelect[]" id='second' multiple='multiple' size='8' >
   <option value="1" style="padding: 10px;">Option a 1</option>
   <option value="2" SELECTED >Option b 2(sel)</option>
   <option value="3">Option c 3</option>
   <option value="4" SELECTED >Option d 4 (sel)</option>
   <option value="5">Option e 5</option>
   <option value="6">Option f 6</option>
   <option value="7">Option g 7</option>
   <option value="8">Option h 8</option>
   <option value="9">Option i 9</option>
   <option value="10" SELECTED >Option l 10 (sel)</option>
</select>​

CSS

.ms2side__div select {
    width: 220px;
    float: left;
    border: 1px solid #BFBFBF;
    background: white;
    font-size: 12px;
    color: #9D9D9D;
    font-family: Arial, Helvetica, sans-serif; 
    padding: 10px;
    line-height: 25px;
}​

http://jsfiddle.net/noscirre/GUdhc/

Answer 1

您可以嘗試使用<optgroup>標簽：

<optgroup>
        <option value="1">Option a 1</option> 
</optgroup>

optgroup {
   padding: 5px 0px
}

http://jsfiddle.net/GUdhc/5/

Answer 2

嘗試在選項本身而不是在選擇項上設置樣式，並集中注意選項的填充和行高。 順便說一句，您的選擇器'.ms2side__div'不正確。 該選擇具有ID，因此請使用“ select＃second”或僅使用“ #second”

Answer 3

如果我是正確的話，Firefox是唯一支持option元素的padding，height，margin或任何其他形式的大小更改的瀏覽器。 （至少Chrome瀏覽器不允許更改大小，並且您不能忽略Chrome用戶），因此上述解決方案主要適用於Firefox和其他一些瀏覽器。

因此，您可以選擇自己滾動或使用可修改性更高的javascript元素庫（例如jquery-ui或twitter bootstrap）。

Answer 4

我在那里更改了代碼示例中的一些內容。 但在我看來，您最好獲得的是所選元素的顏色變化：

http://jsfiddle.net/GUdhc/25/

如果您隨后在框中單擊某些內容，則會看到“選定”的內容是紅色字體。 您不能以這種方式更改填充，邊距或其他內容。

您可能需要使用javascript“ OnChange”來做到這一點，但這超出了我的范圍。