为无选择选项右对齐单个

Question

如何更改样式（例如：添加：text-algin或dir单曲选项）元素之一select或option，这样就不会同时更改样式，而只会更改其中一个样式。

我试图为select做align right单曲，option在前一种情况下仍然存在（手段：align left）。但是不要工作。我该怎么办？

演示

select {
    direction: rtl;
    text-align: right;
    width: 300px;
}​
<select>
    <option disabled="disabled" selected="" value="" style="display: none;">Select</option>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>​

Answer 1

并非所有浏览器都支持对齐单个选项。令人惊讶的是，Firefox允许它，而其他任何IE，Chrome，Opera都不允许。这是尝试在select中设置单个option样式的代码。

<select>
    <option disabled="disabled" selected="" value="" style="display: none;">Select</option>
    <option class="lefty">option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

和 css

select {
    width: 300px;
}
.lefty {
    direction: rtl;
    text-align: right;
}

但是，您可以做的是用额外的空格填充一个选项，以给人一种右缩进的印象，但这不是一个很好的解决方案。

另一种选择是使用不依赖于内置浏览器控件的东西，例如jQuery SelectBox或SelectBoxIt插件，然后您可以设置呈现内容的样式，因为它们不是内置在浏览器行为中，而是动态创建的DOM元素，可以使用CSS设置样式。

对于 SelectBoxIt，您可以使用以下内容：

$(document).ready(function() {
  $('.myselect .selectboxit-option-anchor').first().css("text-align", right");
});

Answer 2

遗憾的是，目前无法跨浏览器选择框样式。 这就是为什么有这么多的选择框插件可以创建模仿选择框的 DOM 元素，以便用户可以进行自定义样式。

如果你最终使用SelectBoxIt并希望在CSS中执行此操作，则可以这样做：

.selectboxit-option:nth-child(1) {
    text-align: right;
}

注意：我写了SelectBoxIt