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

I need to style disabled <select>elements to make them look like they're enabled. Can someone help?

我需要设置禁用的元素的样式,使它们看起来像是已启用。有人可以帮忙吗?

PS. I am all-too-aware of the downsides of doing this sort of thing vis a vis HCI principles etc., but its a requirement so I've got to do it if it is possible ...

PS。我非常清楚这种与HCI原则等相关的事情的缺点,但它是一个要求,所以如果有可能我必须这样做......

Thanks.

EDIT:

@AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with JQuery:

@AlexThomas的方法在HTML代码中禁用元素时效果很好但不幸的是我正在使用JQuery进行禁用/启用:

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

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

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

So the selector:

所以选择器:

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

and

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

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

但$(“。dayselector [disabled ='true']”)//不返回任何内容。

and

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

Is there something I'm missing?

有什么我想念的吗?

3 个解决方案

#1

Using jquery:

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

check it in action here http://jsfiddle.net/GfNve

在这里检查它http://jsfiddle.net/GfNve

#2

You could either go with

你可以选择

select[disabled] {  }

(not supported in <IE7)

( 不支持)

or

select:disabled {  }

(not supported in <IE9)

( 不支持)

#3

Maybe you should use readonly instead of disabled. This will make the input enabled, but without allowing the user to change its value.

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