如何重置或删除 Twitter Bootstrap 中选择元素上的渐变？答案

【问题标题】：How to reset or remove the gradient on the select element in Twitter Bootstrap?如何重置或删除 Twitter Bootstrap 中选择元素上的渐变？
【发布时间】：2013-01-30 10:26:51
【问题描述】：

我需要完全删除或覆盖选择元素上的渐变。我已经下载了 Bootstrap 的自定义副本，没有表单组件，并且选择元素以我需要的方式出现，但其他一切显然都消失了，我只需要删除选择渐变。谢谢。

【问题讨论】：

在 Bootstrap 中 <select> 没有渐变。你的意思是button dropdown？
请向我们展示您自定义 Bootstrap 示例中选择元素的 css 代码。
如果是指 Safari 中默认的光泽渐变外观，请看这里：link 您可以将此属性添加到您的 css 类中：-webkit-appearance:none;

标签： css twitter-bootstrap customization

【解决方案1】：

渐变将在 .btn-* 类上（假设您使用的是按钮下拉菜单）。

例如（使用 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);
}

要移除渐变，您只需移除除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);
}

您还希望使用单色边框来完成：

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

您还需要对 .btn-*:hover、:focus 和 :active 样式执行相同操作。

【讨论】：

【解决方案2】：

Herr_Hansen 的评论对我有用。

对于 Safari，请尝试使用 CSS 将 -webkit-appearance:none; 添加到 <select>

【讨论】：

【解决方案3】：

就我而言，我发现渐变样式位于 bootstrap.theme.css 中，我正在加载其他样式。删除此文件后，一切恢复正常。

【讨论】：