ui-select - make the arrow be on the left side

Question

I'm using the ui-select select-box for angularJS, and I need the arrow of the select-box to be on the left side to match other select-boxes I have and the whole rtl direction of the site.

The arrow appreas on the right side in all the examples I'd found. I tried setting the direction and the float properties but nothing worked.

I'm using the bootstrap style for the ui-select select-box. And in the "real" bootstrap select-boxes it's really easy to move the arrow to the left, simply by setting dir="rtl".

Any ideas? Thanks!

EDIT:

Here's an official example so that you can play with it.

Answer 1

You can reset the right and set left like this

.ui-select-bootstrap .ui-select-toggle > .caret {
   right: initial;
   left: 10px; /* or any other value - it should be the same as the original right value */
}


.ui-select-bootstrap > .ui-select-match > .btn {
    text-align: right !important;
    direction: rtl;
 }


 .ui-select-bootstrap > .ui-select-match > .btn > span.pull-left {
     float: right !important;
 }