0

I have the following bootstrap 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> 

The input-group-addon has a background-image set that is overriding the btn-primary image, so it shows as grey instead of my btn-primary color.

I thought this css would fix it:

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

but it doesn't seem to be working. When I look at the element in chrome, this style doesn't even show up.

What am I doing wrong and how can I get my button color to show up instead of the input-group-addon color?

Scottie
  • 11,050
  • 19
  • 68
  • 109

3 Answers3

0

You need to set the background of the span explicitly. When an element has no background, the color or image behind it shows through.

Relatedly, there is no none value for background-color. The default is transparent:

Is background-color:none valid CSS?

Community
  • 1
  • 1
Thomas Peri
  • 103
  • 1
  • 7
0

Try use

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

You will have to override it back to to the btn-primary properties. The sample below should not affect other style because their styles work together

.btn.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
blecaf
  • 1,625
  • 1
  • 8
  • 13
  • Yeah, but I'm allowing the user to theme their bootstrap, so I have no idea what the default button property is... – Scottie May 02 '17 at 14:12