12

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

4

3 回答 3

5

渐变将在.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 样式执行相同的操作。

于 2013-02-14T15:23:44.193 回答
4

Herr_Hansen的评论对我有用。

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

于 2020-03-30T17:46:42.417 回答
0

在我的例子中，我发现渐变样式在 bootstrap.theme.css 中，我正在加载我的其他样式。一旦我删除了这个文件，一切都恢复了正常。

于 2021-04-27T15:39:59.097 回答