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:

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

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