Question

我想改变插入符号的颜色，使其与输入文本不相关，因为它很难让它看起来很好。

Answer 1

我有两种方法可以做到这一点。如果您希望这会影响您网站上的所有插入符号（可能不是首选），那么您可以覆盖您的插入符号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/

Answer 2

这适用于Wordpress Bootstrap

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

Answer 3

请参阅此帖：How do CSS triangles work?

例如，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: "";
}

希望这有帮助！

Answer 4

不是最好的方法，但应该有效：

在Bootstrap include之后将它添加到样式表（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;
}

Answer 5

找到这个简单的解决方案来改变插入符的位置。

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

Answer 6

另一种改变颜色的方法是根据需要配置bootstrap： http://getbootstrap.com/customize/

对于插入颜色的变化：下拉菜单 - ＆gt; @下拉-脱字符号颜色

然后转到网站底部，点击＆＃34;编译＆amp;下载＆＃34;获取自定义引导版本。

但请注意@ dropdown-caret-color自v3.1.0起已弃用

Answer 7

如果你只想改变插入符本身的颜色，而不是大小或位置，一些简单的CSS工作正常（这是Bootstrap 3.3.6和Wordpress 4.5.2）：

a span.caret {
  color: #666
}

更改bootstrap插入符号（颜色和位置）

7 个答案: