Question

我一直在使用select元素进行测试。我想将文本向右对齐。在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中。我陷入了这一困境，请帮忙。

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

选择元素的文本对齐方式在IE中不起作用

1 个答案: