フラットUIスタイルのCSSをオーバーライドする

Question

CSSクラスの背景色を＃1abc9cからsteelgreenに上書きする必要があります。

私のHTMLコントロールには、フラットui.min.js

.select2-drop .select2-highlighted > .select2-result-label { 
     color: #fff; 
     background: #1abc9c; 
    } 

私はのように背景色を上書きしようとしていますで

<select id="Users" title="App. Users" data-toggle="select" class="form-control select select-primary"></select> 

オリジナルバージョンは、ある

$(".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を削除してみましたが運はありません。

P1。私はここに何が欠けているのか教えてください！

Answer 1

は新色のクラスを作成します。

.select2-drop .select2-highlighted > .select2-result-label.newcolorclass{ color: new_color;} 

はあなたが好きでnew_colorを埋めます。元の色にすべてSELECT2結果、ラベルクラスをリセットするために

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結果ラベルクラスを変更する

var j = document.querySelectorAll('.newcolorclass'); 
for (var i=0;i<j.length;i++){ 
    j[i].className = j[i].className.replace('newcolorclass',''); 
} 

Answer 2

あなたがbackground-color: steelblue !important;を試してみましたbackground: steelblue !important;の代わりに？

background CSSプロパティは、1つの宣言で複数の背景関連プロパティを設定できる簡略プロパティです。 background-colorはより具体的なCSSプロパティであり、!important宣言と結合されているので、色を上書きする方がよいでしょう。

まだ運がない場合は、ウェブブラウザでdevツールを使用することをお勧めします（Chromeは私の好みですが、FFとIE11の両方にまともなものがあります）。本当にコントロールの背景色を設定しているCSSルールを確認しますあなたのオーバーライドが使用されていない理由を垣間見ることができます。私はフレームワークのスタイルをオーバーライドしようとしていたときにCSSの優先順位で焼き付けられていました。開発ツールは特定のルールに従う理由とそうでないルールを追跡するのに役立ちました。

また、私は@ jamie-buttons-coulterに同意します.jQuery/JavaScriptを使ってオーバーライドを行う特定の理由がない限り、ローカルスタイルブロックまたはインポートされたCSSファイル、あなたのプロジェクトの他の部分と一貫性のあるもの）。