Changing bootstrap caret(color and position)

Question

I want to change color of caret and make it not relative from input text, because it's hard to make it look good when it is.

Answer 1

There are two ways I have done this. If you want this to affect all carets on your site (probably not preferred) then you could override the caret css class in you:

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

Another option is to create a custom class and add it to the caret in your markup

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

The original JSFiddle has been updated http://jsfiddle.net/whoiskb/pE5mQ/

Answer 2

This works for Wordpress Bootstrap

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