Select element's text-align not working in IE

Question

I have been working and testing with a select element. I want to align the text to the right. On Chrome and Firefox it's working perfectly...however with dear old IE it doesn't seem to work.

Here is my code:

#inputGroupSelect05 {
    width: 100%;
    background: rgba(0, 0, 0, 0) url("../img/chevron-bottom-white-2x.png") no-repeat left .75rem center;
    text-align: right;
    -ms-text-align: right;
    text-align-last: right;
    -ms-text-align-last: right;
}

select#inputGroupSelect05 {
    width: 100%;
    text-align: right;
    -ms-text-align: right;
    text-align-last: right;
    -ms-text-align-last: right;
}

select#inputGroupSelect05 > option {
    background-color: white;
    color: black;
    width: 100%;
    text-align: right;
    -ms-text-align: right;
    text-align-last: right;
    -ms-text-align-last: right;
}

<div class="col-sm-6 col-md-3 col-lg-3">
  <select class="custom-select" id="inputGroupSelect05" style="color: white;">
    <option selected>More Search Options</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

As you can see in the CSS I included the -ms- prefix aswell, but still the problem persists in IE. I am stumped with this dilemma, please help.

Answer 1

Try to add dir="rtl". This works for me in IE.

Have a look at this SO-Post.

select, option {
    text-align:right;   
}

option {
  direction:rtl;
}

<select>
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>

<select dir="rtl">
    <option>Foo</option>    
    <option>bar</option>
    <option>to the right</option>
</select>