CODEWITHSUNDEEP
htmlcssformscss-selectors
immutabl
immutabl

Reputation: 6903

Is it Possible to Style a Disabled INPUT element with CSS?

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?

Upvotes: 12

Views: 14774

Answers (3)

Alex
Alex

Reputation: 9031

Using jquery:

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

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

Upvotes: 6

GolezTrol
GolezTrol

Reputation: 116100

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

Upvotes: 7

kapa
kapa

Reputation: 78671

You could either go with 

select[disabled] {  }

(not supported in <IE7)

or

select:disabled {  }

(not supported in <IE9)

Upvotes: 10

Related Questions