How to remove shadow from glyphicons in bootstrap carousel

Question

I have a bootstrap carousel on my site. The right and left arrow glyphicons which come with it are surrounded by a square grey box of shading. I was wondering if someone could tell me how to remove the shading so I just have the arrows. Do I have to overwrite bootstrap's css somehow?

Answer 1

I've had this issue before, just add this as bootstrap offers the shadow as a background image or/and as a filter

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

And as suggested before i would change the opacity, but to 1

Answer 2

just add <style="background-image: none;"> in .carousel control