0

如何更改元素之一的样式（例如：添加：text-algin或单个选项）或，这样既不会更改样式，也只会更改其中一个样式。dirselectoption

我尝试为和做align right单曲，在前一种情况下仍然存在（意思是：）。但不要工作。我该怎么办？selectoptionalign 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>​
4

2 回答 2

0

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

如果您最终使用SelectBoxIt并想在 CSS 中执行此操作，您可以这样做：

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

注意：我写了 SelectBoxIt

于 2012-11-20T15:15:55.333 回答
0

并非所有浏览器都支持对齐单个选项。令人惊讶的是，firefox 允许它，而其他任何 IE、Chrome、Opera都不允许。这是尝试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");
});
于 2012-11-20T13:53:33.607 回答