我有这个多重选择,我想更改个人<option>
的默认背景
<select size="8" name="lstSelectedPackages" style="width:100%">
<option value="" selected="selected">Select</option>
</select>
小提琴:http://jsfiddle.net/ux4DD/180/
谢谢!
答案 0 :(得分:2)
只需更改样式的背景,如下所示
<select size="8" name="lstSelectedPackages" style="width:100%; background:#fff999">
<option value="" selected="selected">Select</option>
</select>
如果您想对所有选择标记执行此操作,则可以在css上添加以下代码
select{
background: #fff999;
}
您可以使用jquery,但如下所示:
$("option:selected").css{"background", "#fff999"}
答案 1 :(得分:2)
如果jQuery
最适合您,那么我相信这一定会有所帮助。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$("select option:selected").each(function ()
{
$(this).css('background-color','red');
});
});
</script>
<select name="garden">
<option>Flowers</option>
<option selected="selected">Shrubs</option>
<option>Trees</option>
<option>Bushes</option>
<option>Grass</option>
<option>Dirt</option>
</select>
<div></div>
答案 2 :(得分:1)
更新了显示如何操作的小提琴:http://jsfiddle.net/ux4DD/181/
应该注意的是,当涉及到跨浏览器的样式时,选择是众所周知的不可靠,因此您的样式可能在所有浏览器/版本中不一致。
select {
height:50px;
background-color: #dcdcdc;
}
如果您只想让一个选择具有特定的背景颜色/样式,请使用类来定义它,例如
<select class="my-select-class">
<option>2</option>
</select>
.my-select-class {
background-color: #dcdcdc;
}
不建议在网页上使用内联样式,因为这会让他们成为维持生产线的噩梦。
坚持使用外部样式表。
答案 3 :(得分:1)
使用background-color
select{
height:50px;
background-color:green;
}
<强>更新强>
使用jquery。
$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');
答案 4 :(得分:1)
我想你想要这样的答案
Jquery的
$('.mySelect').change(function () {
$(this).find('option').css('background-color', 'transparent');
$(this).find('option:selected').css('background-color', 'red');
}).trigger('change');
HTML
<select class="mySelect">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>