Question

如何更改样式（例如：添加：text-algin或dir单个选项）其中一个元素select或option，这样就不会改变风格兼顾，只改变其中一种风格。

我尝试为align right执行select单行，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 don't除外。以下是尝试在option中设置单个select样式的代码。

<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

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

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

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

注意：我写了SelectBoxIt

对齐单选以选择无选项

2 个答案: