删除多选默认背景答案

【问题标题】：Remove multiple select default background删除多选默认背景
【发布时间】：2013-01-28 21:29:53
【问题描述】：

我有这个多重选择，我想更改个人 <option> 的默认背景

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

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

谢谢！

【问题讨论】：

select { background: red; }?
哪个背景..??身体 bg.??选择bg..?? div bg..??什么..？？
@Dipesh Parmar 仅选定的行背景。
看here。
看看我的回答是否有帮助。

标签： jquery html css select

【解决方案1】：

只需更改样式的背景，如下所示

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

【讨论】：

我不想只为选定的行更改所有选择的背景：|
对于选定的选项，您可以试试这个 option[selected]{background:#fff999} 注意：这可能取决于浏览器

【解决方案2】：

更新的小提琴展示了如何做到这一点：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;
}

不建议在您的网页上使用内联样式，因为这会使它们成为维护后续工作的噩梦。

坚持使用外部样式表。

【讨论】：

我不想只为选定的行更改所有选择的背景：|
@burebistaruler - 抱歉，我现在明白你的意思了，据我所知，颜色是由操作系统设置的，无法更改。可能有 JavaScript 解决方案，但我不能 100% 确定。

【解决方案3】：

使用background-color

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

}

更新

使用 jquery。

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

fiddle here

【讨论】：

我不想只为选定的行更改所有选择的背景：|

【解决方案4】：

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

【讨论】：

【解决方案5】：

我想你想要这样的答案

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

【讨论】：