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-control {
text-shadow: none;
opacity: 1;
filter: alpha(opacity=100)
}
.carousel-control.left {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.5)), to(rgba(0,0,0,0.0001)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.5) 0), color-stop(rgba(0,0,0,0.0001) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)
}
.carousel-control.right {
background-image: -webkit-gradient(linear, 0 top, 100% top, from(rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.5)));
background-image: -webkit-linear-gradient(left, color-stop(rgba(0,0,0,0.0001) 0), color-stop(rgba(0,0,0,0.5) 100%));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)
}
.carousel-control:hover, .carousel-control:focus {
opacity: 1;
filter: alpha(opacity=100)
}

Have you tried to remove `background-image` and `filter` declarations? — Pavlo, Dec 23 '13 at 15:28
Actually, I think I finally got it! `code` filter:progid:DXImageTransform.Microsoft.gradient(enabled='false') — VSHoward, Dec 23 '13 at 15:44
Nice! Now you can post your solution as the answer and accept it. — ringstaff, Dec 27 '13 at 20:55
What did you exactl get? Please I still cant' remove that. Thanks! — I Wanna Know, May 03 '15 at 09:15

score 117 · Answer 1 · answered Feb 19 '14 at 02:34

117

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

answered Feb 19 '14 at 02:34

George Armhold

30,824
50
153
232

2

you may need to add !important depending on your css structure – psorensen Feb 20 '14 at 14:43
Mine worked with a custom style that had selector "a.myStyle.carousel-control". – Peter L Aug 26 '15 at 07:19
If want avoid dotted border on select, add outline: none. `.carousel-control.left, .carousel-control.right { background-image: none; outline: none; }` – equiman Nov 04 '15 at 02:05

fullgeek · Answer 2 · 2020-06-06T00:33:38.410

19

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;
}

edited Jun 06 '20 at 00:33

answered Apr 08 '14 at 22:33

fullgeek

191
1
4

11

`.carousel-control { background: none !important; filter: none !important; progid:none !important; }` – Hunt Burdick Dec 19 '14 at 19:41
1

This is the correct answer, as it includes reset for IE9 – piotr_cz Oct 30 '15 at 09:51

score 12 · Answer 3 · answered Mar 14 '15 at 16:53

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;
}

score 5 · Answer 4 · answered Jul 09 '14 at 14:23

5

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

SASS:

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

answered Jul 09 '14 at 14:23

Rafal Gałka

1,022
1
10
16

This seems like the most robust answer, especially if you're already using bootstrap-sass – elsurudo Dec 30 '14 at 21:10
Best answer for SASS users! – bart Jul 31 '15 at 22:03

score 1 · Answer 5 · answered May 15 '17 at 14:48

1

.carousel-control {
        opacity:100;
    }

worked for me. Hope this can help someone.

answered May 15 '17 at 14:48

Danie Du Preez

93
1
2
8

score 0 · Answer 6 · answered Mar 11 '22 at 10:44

0

Try using slick,owl carousal slider if you want slider without blur.

answered Mar 11 '22 at 10:44

Progga Ilma

578
6
8

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

6 Answers6

Linked