改變自舉插入符號（顏色和位置）

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 
}