0

我一直在使用选择元素进行工作和测试。我想将文本向右对齐。在 Chrome 和 Firefox 上，它运行良好……但是，对于亲爱的旧 IE，它似乎不起作用。

这是我的代码：

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

正如您在 CSS 中看到的那样，我也包含了 -ms- 前缀，但问题仍然存在于 IE 中。我被这个困境难住了，请帮忙。

4

1 回答 1

1

尝试添加dir="rtl". 这在 IE 中对我有用。

看看这个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>

于 2018-10-30T06:48:09.593 回答