我必须重写一个CSS类的背景色,从#1abc9c到steelgreen。
我的html控件是<select id="Users" title="App. Users" data-toggle="select" class="form-control select select-primary"></select>
flat-ui.min.js中的原始版本
.select2-drop .select2-highlighted > .select2-result-label {
color: #fff;
background: #1abc9c;
}
我试图覆盖背景色为,
$(".select2-drop").css('background', 'steelblue !important');
$(".select2-highlighted").css('background', 'steelblue !important');
$(".select2-result-label").css('background', 'steelblue !important');
$(".select2-drop .select2-highlighted > .select2-result-label").css('background', 'steelblue !important');
他们都没有算出来。我也试过删除!important
,但没有运气。
Pl。让我知道我错过了什么!
创建一个新的颜色类:
.select2-drop .select2-highlighted > .select2-result-label.newcolorclass{ color: new_color;}
用你想要的填充new_color
将所有select2-result-label类更改为新颜色:
var j = document.querySelectorAll('.select2-result-label');
for (var i=0;i<j.length;i++){
j[i].className = j[i].className.replace('select2-result-label','select2-result-label newcolorclass');
}
将所有select2-result-label类重置为原始颜色:
var j = document.querySelectorAll('.newcolorclass');
for (var i=0;i<j.length;i++){
j[i].className = j[i].className.replace('newcolorclass','');
}
您是否尝试使用background-color: steelblue !important;
而不是background: steelblue !important;
?
background
CSS属性是一个速记属性,允许您在一个声明中设置多个与背景相关的属性。因为background-color
是一个更具体的CSS属性,加上!important
声明,你应该有更好的运气覆盖颜色。
如果你仍然没有运气,我建议在web浏览器中使用开发工具(Chrome是我的首选,但FF和IE11都有不错的)来验证真正设置控件背景颜色的CSS规则,并可能了解为什么你的覆盖没有被使用。过去,当我试图重写框架样式时,我一直被CSS优先级所困扰,开发工具帮助我跟踪为什么遵循特定规则而不遵循其他规则。
另外,我同意@jamie-buttons-coulter的观点,除非有特殊的原因需要使用jQuery/JavaScript重写,否则你应该使用CSS(在本地样式块或导入的CSS文件中,无论哪个与项目的其余部分一致)来实现它。