改变自举插入符号（颜色和位置）

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

不是最好的方式，但它应该工作：

的引导后，添加到您的样式表（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 3

这适用于WordPress的引导

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

Answer 4

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

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

Answer 5

参考这个帖子：How do CSS triangles work?

例如，通过引导提供的标准“下”箭头使用以下样式：

<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 6

另一种方式来改变颜色，只要你喜欢上配置的引导： http://getbootstrap.com/customize/

对于插入颜色变化： 下拉框 - > @下拉菜单，插入符颜色

然后去的底部并点击“编译&下载”来获得您的自定义引导版本。

不过需要注意的@下拉，脱字的颜色是不赞成V3.1.0的

Answer 7

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

a span.caret { 
    color: #666 
}