How to reset or remove the gradient on the select element in Twitter Bootstrap?

Question

I need to completely remove or override specifically the gradient on the select element. I've downloaded a custom copy of Bootstrap, without the form components, and the select element appears the way i need, but everything else is obviously gone, and i only need to remove the select gradient. Thanks.

Please show us the css code for the select element from your custom Bootstrap example. — Billy Moat, Feb 14 '13 at 15:26
If the default glossy gradient look in Safari is meant, have a look here: [link](http://stackoverflow.com/questions/7638677/how-can-i-remove-the-gloss-on-a-select-element-in-safari-on-mac) You may add this attribute to your css class: `-webkit-appearance:none;` — Herr_Hansen, Aug 11 '15 at 09:50

score 5 · Accepted Answer · answered Feb 14 '13 at 15:23

The gradients will be on the .btn-* class (assuming you're using button dropdowns).

For example (with btn-primary):

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

To remove the gradient, you'd simply remove all the background properties (including the filters at the bottom) apart from background-color;:

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

You'd also want to finish up by using a single-color border:

.btn-primary {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  border-color: #0044cc;
}

You'd also need to do the same for the .btn-*:hover, :focus and :active styles.

score 4 · Answer 2 · answered Mar 30 '20 at 17:46

4

Comment by Herr_Hansen works for me.

For Safari, try adding -webkit-appearance:none; to <select> with CSS

answered Mar 30 '20 at 17:46

Berta Nicolau

128
1
8

score 0 · Answer 3 · answered Apr 27 '21 at 15:39

0

In my case, I found the gradient styles were in the bootstrap.theme.css I was loading with my other styles. Once I removed this file, all went back to normal.

answered Apr 27 '21 at 15:39

ArtFranco

300
3
10

How to reset or remove the gradient on the select element in Twitter Bootstrap?

3 Answers3