Is it Possible to Style a Disabled INPUT element w

2020-08-12 01:26发布

问题:

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 ...

Thanks.

EDIT:

@AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with 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.

and

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

Is there something I'm missing?

回答1:

Using jquery:

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

check it in action here 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.