CSS 如何重置或删除 Twitter Bootstrap 中选择元素上的渐变？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14877883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset or remove the gradient on the select element in Twitter Bootstrap?
提问by Jorge Guberte
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.
我需要完全删除或覆盖选择元素上的渐变。我已经下载了 Bootstrap 的自定义副本，没有表单组件，并且 select 元素以我需要的方式出现，但其他一切显然都消失了，我只需要删除 select 渐变。谢谢。
采纳答案by James Donnelly
The gradients will be on the .btn-*class (assuming you're using button dropdowns).
渐变将在.btn-*类上（假设您使用按钮下拉菜单）。
For example (with btn-primary):
例如（使用 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;:
要删除渐变，您只需删除所有背景属性（包括底部的过滤器），除了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.
您还需要对 .btn-*:hover、:focus 和 :active 样式执行相同的操作。
回答by Berta Nicolau
Comment by Herr_Hansenworks for me.
Herr_Hansen 的评论对我有用。
For Safari, try adding -webkit-appearance:none;to <select>with CSS
对于Safari浏览器，尝试加入-webkit-appearance:none;到<select>与CSS
