Unable to resize caret in bootstrap theme of angular-ui-select

Question

I am attempting to modify the appearance of the caret (down arrow) on the right of an angular-ui-select. I have been able to make some changes to the caret (for instance, changing its color) by putting css properties on the

.ui-select-boostrap .ui-select-toggle > .caret

css class. However, nothing that could change its size (height, width, font-size, background-size) has any effect.

I have looked in the select.css file in the angular-ui-select/dist folder, and it has the following css properties on the class in question:

.ui-select-bootstrap .ui-select-toggle > .caret {
  position: absolute;
  height: 10px;
  top: 50%;
  right: 10px;
  margin-top: -2px;
}

However, this has not, of yet, been of any use to me in making the change. Even changing the 'height' property directly in this css file (or the min.css file) does not fix the issue.

Answer 1

Change the size of the borders

.ui-select-bootstrap .ui-select-toggle > .caret {
    border-top: 20px solid black;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}

This could be useful: https://css-tricks.com/snippets/css/css-triangle/