How do you remove the default Bootstrap 3 carousel control background gradients?

Question

I\'m pretty sure this is the code I need to modify, but for some reason I can\'t get the gradients to disappear in IE. I want them completely gone!

.carousel-con         


        

Answer 1

IE has a weird filter and this worked when trying to fix it in IE9 (should work for all):

.carousel-control.left, .carousel-control.right{ 
    background: none !important;
    filter: none !important;
    progid:none !important;
}

Answer 2

.carousel-control {
        opacity:100;
    }

worked for me. Hope this can help someone.

Answer 3

There is specialized mixin for resetting IE gradient (Bootstrap 3).

SASS:

.carousel-control {
  &.left, &.right {
    background-image: none;
    @include reset-filter();
  }
}

Answer 4

I notice that this will also have this annoying dotted line box when you click it unless you add this:

All in all, this makes the buttons beautiful:

.carousel-control.left, .carousel-control.right {
  background: none !important;
  filter: progid: none !important;
  outline: 0;
 }
.carousel .carousel-control {
  visibility: hidden;
}
.carousel:hover .carousel-control {
  visibility: visible;
}

Answer 5

.carousel-control.left, .carousel-control.right {
    background-image: none
}