wordpress search submitボタンを修正しようとしています

Question

これは簡単なことですが、グーグルや他のプログラマーを1時間雇用してみても、すべてを試してみました。私が働いているテーマは、Wordpress検索ボックスの送信ボタンに特定の色があり、色を変更するだけです。

Googleの開発ツールでそれを見ると、CSSは次のようになります。私がやりたいのは何

.search-button, .submit_btn { 
    background-color: #ffa025; 
    background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%); 
    background-image: linear-gradient(#ffa025 0%,#dc7214 100%); 
    border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #f7b559 #e67e22 #e67e22 #e67e22; 
    color: #fff; 
    font-family: FontAwesome; 
    float: left; 
    height: 45px; 
    width: 16%; 
} 

screenshot of style from google dev tools

はちょうどグラデーションで背景画像の属性をオフにしていると背景色はちょうど赤です。私は上記のセレクタを使って試してみましたが、セレクタ：.search-button sBnを試して、テーマ用の追加のCSSフィールドにコードを入れてみました。何も働いていない。助けをありがとう

Answer 1

あなたが特定したように、背景画像に設定された線形グラデーションは、背景色スタイルをオーバーライドしています。背景色プロパティを代わりに使用することができるようにbackground-imageをリセットするために、次の操作を行います。

background-image: none; 

これは次にテーマCSSのbackground-colorセット（すなわち＃1 ffa025）に背景色をリセットします。

色を変更するには、background-colorに設定します。

background-color: #ffa025; 

はまた、単にbackgroundプロパティを使用することができ、それはノックにあなたが設定した他のルールの影響かもしれないので、私は既存のプロパティをオーバーライドすることをお勧めしたいです。

/* THEME CSS */ 
 
.search-button, .submit_btn { 
 
    background-color: #ffa025; 
 
    background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%); 
 
    background-image: linear-gradient(#ffa025 0%,#dc7214 100%); 
 
    border-top-right-radius: 4px; 
 
    border-bottom-right-radius: 4px; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    border-color: #f7b559 #e67e22 #e67e22 #e67e22; 
 
    color: #fff; 
 
    font-family: FontAwesome; 
 
    float: left; 
 
    height: 45px; 
 
    width: 16%; 
 
} 
 
/* YOUR CSS TO OVERRIDE THEME */ 
 
.search-button, .submit_btn { 
 
    /* remove the gradient */ 
 
    background-image: none; 
 
    /* change the background colour to red */ 
 
    background-color: #ff0000; 
 
}

<button type="submit" class="search-button">Search</button>

最後に

は、いずれかのカスタムCSSがテーマのCSSの後にロードされていることを確認することを忘れないでください、またはそれは、より具体的なセレクタを使用しています。

作業は、スニペットテーマCSSよりも

.search-button.sBn {background-color: #ffa025;} 

（はFYI、何をやろうとしていることは私はあなたが雇ったプログラマ非常に心配になると思い、非常に簡単です - これは、彼らに分のカップルよりも多くを取っていないはずです）