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

Refer to this post: How do CSS triangles work?

For example, the standard "down" arrow provided by bootstrap uses the following style:

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

Here I have just transposed the borders a bit, and now it is an "up" arrow. The same approach can be done for right and left carets.

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

Hope this helps!

Answer 2

Not the best way but it should work:

Add this to your stylesheet (CSS) after the Bootstrap include.

.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

Found this simple solution to change the position of the caret.

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

Answer 4

Another way to change color is to configure bootstrap as you like on: http://getbootstrap.com/customize/

For caret color change: Dropdowns -> @dropdown-caret-color

then go to the bottom of the site and click "Compile & Download" to get your custom bootstrap version.

But note @dropdown-caret-color is deprecated as of v3.1.0

Answer 5

This works for Wordpress Bootstrap

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

Answer 6

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/