是否可以使用CSS为禁用的INPUT元素设置样式？

Question

我需要为disabled的<select>元素添加样式，使它们看起来像启用状态。有人能帮忙吗？

PS. 我非常清楚这种做法与人机交互原则等方面存在缺陷，但这是一个要求，所以如果可能的话，我必须这样做...

谢谢。

编辑：

当使用JQuery禁用/启用元素时，@AlexThomas的方法效果很好，但不幸的是，我的情况是这样的：

<select class='dayselector'>
    <option>Monday</option>
    <option>Tuesday</option>
    <!-- .... etc. -->
</select>

$(".dayselector").attr("disabled",true);

$(".dayselector").attr("disabled",false);

所以这个选择器是：

。

$(".dayselector")  //works and gets all the selects

并且

$(".dayselector option")  //works and gets all the selects' option items

但是
$(".dayselector [disabled='true']") //没有返回任何结果。

以及

`$(".dayselector [disabled='false']")  //doesn't return anything.

我有什么遗漏吗？

- immutabl

Answer 1

你可以选择

select[disabled] {  }

(在IE7及以下版本中不支持)

或者

select:disabled {  }

(仅限IE9及以上版本支持)

- kapa

Answer 2

也许你应该使用readonly而不是disabled。这将使输入框可用，但不允许用户更改其值。

- GolezTrol

---

我再说一遍：我不希望选择项可以直接编辑。所以只读模式不行，因为它们仍然是可更改的。 - immutabl

如果它们是只读的，那么它们怎么可更改呢？只读意味着不可编辑。 - GolezTrol

@GolezTrol - 这就是我的意思，它们是只读的，但你仍然可以选择不同的元素，所以它们是可更改的： http://jsfiddle.net/KG6us/ - immutabl

啊，我明白了。Select 不支持只读。只读是针对其他输入字段的。所以它们不是只读的。 - GolezTrol

但是，它涉及到选择。关于复选框的小贴士是给读评论的任何人的免费战利品。该贴士被点踩是因为这个答案完全错误。 - Sean

Answer 3

使用jQuery:

$('option[disabled="true"]').each(function () {
                 $(this).attr('style', 'color:red');
});

在这里可以查看它的实际应用 http://jsfiddle.net/GfNve

- Alex

---

您真是太棒了！我只希望我能给您更多的投票 :-)非常感谢，看起来很棒！ - immutabl

该死。当元素在HTML中以声明式方式禁用时，它运行得很好，但是当我使用jQuery来禁用它们时，它就不起作用了。请参考上面的编辑 - 我希望能听到您的建议。 - immutabl

当您在jQuery中设置禁用时，请同时设置样式。 - Alex

太棒了！非常感谢 :-) 我不完全确定这为什么有所区别，但是谁在乎呢，它运行得很好。 - immutabl

$('option:disabled').attr('style', 'color:red'); - Mrigesh Raj Shrestha