如何更改多选下拉框中所选项目的背景颜色？

我想给多选下拉框中的选定项目赋予黄色。默认情况下，它选择后有灰色背景，我想在HTML, CSS中这样做。如何更改多选下拉框中所选项目的背景颜色？

任何人都可以帮忙吗？

2012-11-22 user9371102

我们可以用JS来选择的DOM。

$('select').change(function() { 
    $('option').css('background', 'none'); 
    $('option:selected').css('backgroundColor', 'red'); 
}).change() 

<select> 
    <option>1111111</option> 
    <option>222222222</option> 
    <option>33333333</option> 
    <option>44444444</option> 
</select>

演示：http://jsfiddle.net/TxbVt/1/

来源

2013-07-07 05:50:53 user9371102

不适用于多选：:( – t1gor

这对我来说也不适用于多选。 –

-3

你不能。 <option>元素不接受CSS样式。

您可以使用基于JavaScript的替代方案。有许多<select>替代脚本可用。

来源

2012-11-22 15:26:04

不真实100％恐怕......现代浏览器确实允许这样做。尝试在FireFox中使用;但是它不能跨浏览器可靠。 – Pebbl

感谢@Diodeus，你可以用JavaScript来帮助我，如下所示。 ** selected {/ *文本颜色和字体重量，红色和粗体*/ 颜色：蓝色; font-weight：bold; } ** – user9371102

JavaScript无法使用标准选择项目执行此操作。请参阅：http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx –

下应该工作（用于浏览器，让造型选项标签），但是默认选择的造型将在大多数情况下覆盖。您可能能够找到一种方法，但是禁用此：

CSS

select option.selected { 
    font-weight: bold; 
    color: red; 
}

的JavaScript

function highlight_options(field){ 
    var i,c; 
    for(i in field.options){ 
    (c=field.options[i]).className=c.selected?'selected':''; 
    } 
}

标记

<select onchange="highlight_options(this)" multiple="multiple"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select>

来源

2012-11-22 15:39:00 Pebbl

感谢@pebbl，系统颜色重写，http：// jsfiddle。净/ rZuYz/ – user9371102

@VicKyAmr是的，不幸的是，正如我所说的。由它的外观你不能删除这...至少就我发现的。所有这些都是因为突出显示不是选项元素的属性，所以它是顶层的图层。但是，您仍然可以影响不会被覆盖的样式...像边框和填充。您还可以将样式和背景图像应用到未选定的选项，以使其更具吸引力。 – Pebbl

这不适用于FF :( – t1gor

-1

纯CSS将有助于在这里：

option:checked

来源

2016-07-21 03:41:59

<style> 
    .select2-container--default .select2-results__option[aria-selected=true] { 
     background-color: inherit; 
     color: lightgray; 
    } 
</style>

添加你自己的风格的块中。

来源

2016-11-07 09:58:14 Elnaz

我们可以简单地使用下面的CSS帮助。

select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }

来源

2016-12-14 13:24:32

如何更改多选下拉框中所选项目的背景颜色？

回答

相关问题