cssでは、別のクラスのバックグラウンドを維持しながら、あるクラスの背景をnoneに設定するにはどうすればよいですか？

Question

Iは、次のブートストラップHTML有する：

<div class='input-group'> 
    <input class='form-control' /> 
    <span class='input-group-addon btn btn-primary'><i class='fa fa-chevron-down'></i></span> 
</div> 

入力基アドオンはBTN原色画像を上書きするので、代わりに私のBTN原色のような灰色を示している背景画像が設定されています。

私はこのCSSはそれを修正するだろうと思った：

.input-group .input-group-addon:not(.btn-primary) { 
    background-color: none; 
} 

それが動作していないようです。クロムの要素を見ると、このスタイルは表示されません。

私は間違っていますが、入力グループアドオンカラーの代わりに私のボタンカラーを表示するにはどうすればよいですか？

Answer 1

スパンの背景を明示的に設定する必要があります。要素に背景がない場合、要素の後ろの色や画像が透けて見えます。

background-colorの値はnoneではありません。デフォルトはtransparentです：

Is background-color:none valid CSS?

Answer 2

は、あなたが戻ってBTN-主要な特性にするためにそれを上書きする必要があります

.input-group .input-group-addon{ 
    background-color: transparent !important; 
} 

Answer 3

を使用してみてください。以下のサンプルは、そのスタイルが一緒に機能するので、他のスタイルに影響を与えるべきではありません。

.btn.btn-primary { 
    color: #fff; 
    background-color: #337ab7; 
    border-color: #2e6da4; 
}