2013-02-13 67 views
3

我有这样的多重选择,我想更改默认背景的individidual <option>删除多个选择默认的背景

<select size="8" name="lstSelectedPackages" style="width:100%"> 
    <option value="" selected="selected">Select</option> 
</select> 

小提琴:http://jsfiddle.net/ux4DD/180/

谢谢!

+2

'select {background:red; }'? – Andy 2013-02-13 10:50:49

+0

哪个背景.. ??身体bg。??选择BG .. ?? div bg .. ??什么..?? – 2013-02-13 10:54:04

+0

@Dipesh Parmar只选择了线条背景。 – BurebistaRuler 2013-02-13 10:59:26

回答

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

我不想改变背景全部仅为选定的行选择:| – BurebistaRuler 2013-02-13 10:56:54

+0

为选定的选项,你可以尝试这一个**选项[选择] {背景:#fff999} **注意:这可能是浏览器依赖,但 – zdesam 2013-02-13 11:10:20

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; 
} 

建议您不要在您的网页上使用内联样式,因为这会让他们成为噩梦来维持生产线。

坚持外部样式表。

+0

我不想改变所有选择的背景只为选定的行:| – BurebistaRuler 2013-02-13 10:57:40

+0

@burebistaruler - 请参阅上面我更新的答案。 – 2013-02-13 10:58:09

+0

只适用于选定的行... – BurebistaRuler 2013-02-13 11:01:02

1

使用background-color

select{ 
    height:50px; 
    background-color:green; 

} 

使用jQuery更新

$('option').css('background', 'none'); 
$('option:selected').css('backgroundColor', 'red'); 

fiddle here

+0

我不想改变所有只选择行的背景: – BurebistaRuler 2013-02-13 10:58:07

+0

更新了我的答案,请检查 – bipen 2013-02-13 11:09:28

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>
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> 

See Demo Refrence link