使用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的样式选择选项

回答

相关问题