使用css的樣式選擇選項

我想使用CSS樣式選擇選項列表。我想在列表的時間之間填充更多的填充因爲看起來好像壓縮在一起。我已經嘗試添加填充選項元素，但這似乎不起作用。有任何想法嗎？使用css的樣式選擇選項

這裏是我的代碼

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/

來源

2012-06-20 user1038814

沒有辦法改變這種AFAIK，瀏覽器控制着。 –

對不起，修改了它。 – user1038814

如果我是正確的，Firefox是隻有瀏覽器支持填充，高度，邊距或任何其他類型的修改選項元素的大小。（至少Chrome不允許改變任何尺寸，並且您不能忽略Chrome用戶），所以上述解決方案主要適用於Firefox，也可能適用於其他某些瀏覽器。

所以你的選擇是推出你自己的或者使用一個JavaScript元素庫，如jquery-ui或twitter bootstrap，這些元素庫是可以修改的。

來源

2012-06-20 11:43:00 jakee

嘗試設置的選項我的風格自己而不是選擇，並專注於選項的填充和行高。順便說一句，你的選擇器'.ms2side__div'是不正確的。選擇有一個ID，所以使用 '選擇＃第二' 或只是 '#second'

來源

2012-06-20 11:31:03

你可以嘗試<optgroup>標籤：

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

optgroup { 
    padding: 5px 0px 
}

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

來源

2012-06-20 11:32:10 undefined

我改變了你的代碼示例中的一些東西。但它看起來像你對我會得到最好的是所選元素的顏色變化：

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

如果你再點擊東西，你會看到「選擇」那些箱子是一個紅色的字體。你不能改變填充，邊距或其他方式。

您可能需要使用javascript「OnChange」才能做到這一點，但這超出了我的想象。

來源

2012-06-20 11:44:48 MattBoothDev

JQUERY方式，DEMO = http://jsfiddle.net/GUdhc/29/

來源

2012-06-20 12:49:52

使用css的樣式選擇選項

回答

相關問題