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/