更改Bootstrap的下拉菜单箭头（颜色和位置）

Question

更改Bootstrap的下拉菜单箭头（颜色和位置）

twitter-bootstrapcaret

22

我希望改变光标的颜色，并使其与输入文本无关，因为这样做难以使它看起来好看。

- Denys Medynskyi

7个回答

8

这适用于WordPress Bootstrap。

// Caret color
.navbar .nav li.dropdown > .dropdown-toggle .caret {
    border-bottom-color: #FFFFFF;
    border-top-color: #FFFFFF;
}

- Fred K

如果你想编辑bootstrap.css而不仅仅是添加一个新类来覆盖它，就像我所做的那样，那么这就是实现的方法。 - Taylor Brown

7

请参考这篇文章：CSS三角形是如何工作的？例如，Bootstrap提供的标准“向下”箭头使用以下样式：

<span class="caret"></span>

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-bottom: 0 dotted;
  border-left: 4px solid transparent;
  content: "";
}

我这里只是稍微调整了边框的位置，现在它变成了“向上”的箭头。对于右和左的尖角，可以采用相同的方法。

<span class="up_caret"></span>

.up_caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-bottom: 4px solid #000000;
  border-left: 4px solid transparent;
  border-top: 0 dotted;
  border-right: 4px solid transparent;
  content: "";
}

希望这能帮到你！

- preynolds

1

你太棒了，你给了我插入符号的基本样式，并且我能够按照自己的想法进行自定义...谢谢！ - Mayer Spitz

1

不是最好的方法，但应该可以工作：

在引入Bootstrap之后，将此代码添加到您的样式表（CSS）中。

.btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret {

    border-top-color: red;

    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity: 1;
    opacity: 1;
}

- HaNdTriX

谢谢！那么光标的位置呢？我该如何解决我的问题？ - Denys Medynskyi

另外，我无法使活动的导航标签改变颜色。找不到相应的属性。 - Denys Medynskyi

1

如果您只想更改插入符号本身的颜色，而不是大小或位置，则可以使用一些简单的CSS（这是Bootstrap 3.3.6和WordPress 4.5.2）：

a span.caret {
  color: #666
}

- ben.kaminski

0

改变颜色的另一种方式是根据您的喜好配置Bootstrap，访问链接获取更多信息： http://getbootstrap.com/customize/

要更改下拉菜单中小三角符号的颜色： Dropdowns -> @dropdown-caret-color

然后转到网页底部，点击“Compile & Download”即可下载自定义的Bootstrap版本。

但请注意，@dropdown-caret-color在v3.1.0版本中已不推荐使用。

- Dado

0

发现了这个简单的解决方案来改变插入符号的位置。

//example of moving curser 20 pixels to the right
input { 
    padding-left: 20px;
    padding-right: -20px;
}

- erikdeagle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin · Accepted Answer

我有两种方法来实现这个。如果你想要影响网站上的所有插入符（可能不是首选），那么你可以在你的 css 文件中重写插入符的类：

.caret{border-top:4px solid red;}

另一个选择是创建一个自定义类并将其添加到您的标记中的插入符号中。

.red{border-top:4px solid red;}

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action<span class="caret red"></span></button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

这个JSFiddle已经更新了http://jsfiddle.net/whoiskb/pE5mQ/