changing the style of 'disabled' elements in html style sheets???

n1875621 used Ask the Experts™
i want to able to change the font color of the style of 'disabled' html elements....

for example

<input type="edit" name="test" value="value here" DISABLED>

prints the input box all greyed out - which is what i want, but i can barely read the value so i want to be able to change that to a darker - blacker font color.....

adding style="font-color: #000000;" doesn't work.

any ideas?
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

if you want to change the color of the font use


That should work.


it doesnt work.... for some reason the disabled paramater is taking precendence over the color attribute.

i imagine its a whole new attribute, like "disabled-color: #000000" or something

You could always create a class for displaying the data, and store the data in a hidden field if you need to use it again.

<!-- in your css file or header -->
     border: 1px solid #000;

<!-- in the body -->
<span class="disabled"> value here </span>                           -- Just use this for display
<input type="hidden" name="test" value="value here" >    -- Store actual data here

it is really bulkwork around, but I haven't had any luck with anything else I have tried.

you could also try !Important to see if this will over ride the setting
style="color:#000000 !important;"

Good luck
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Top Expert 2013
You can't have it both ways.  The disabled behaviour greys out the control, and overrides the styling.
If you want to prevent entry and still be able to style it then use readonly instead of disabled.



readonly works really well for edit boxes, but for select boxes it still allows me to change the value.... any idea there?

i found this at w3c

17.12.1 Disabled controls
Attribute definitions

disabled [CI]
When set for a form control, this boolean attribute disables the control for user input.
When set, the disabled attribute has the following effects on an element:

Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successful.
The following elements support the disabled attribute: BUTTON, INPUT, OPTGROUP, OPTION, SELECT, and TEXTAREA.

This attribute is inherited but local declarations override the inherited value.

How disabled elements are rendered depends on the user agent. For example, some user agents "gray out" disabled menu items, button labels, etc.

In this example, the INPUT element is disabled. Therefore, it cannot receive user input nor will its value be submitted with the form.

<INPUT disabled name="fred" value="stone">

Note. The only way to modify dynamically the value of the disabled attribute is through a script.


I am aware of all that.... so how do i change the color? :)

hmm.. it seems to me that c.d. is once again, correct...

I can conceptualize a way to make it work, but it would be *a lot* of work for what you want...

you could use readonly, as was already suggested,  and you could (here comes the ugly part) remove all of the options from the select except the one you want. i don;t even know if it would work....

that or maybe you could write a script such that when the select gets focus, you set the focus to something else... again i don;t know if it will work.

or, another off the wall idea that may or may not work for you...

have a text field next to the select. normaly the field is has visibility set to hidden (or display: none). when you would normally disable the select, you fill the filed with it's value, set the file d to visible and readonly, and set the selct to visible: hidden.

let me translate that into something more closely related to english... pseudocode!

function disableselect {
   field.value = select.value
   select.visibility = hidden
   field.readonly = true
   field.visibility = visible

function enableselect {
   field.visibility = hidden
   select.visibility = visible
Top Expert 2013

This is probably about as close as you can get to a manual disable of a select.  You have to manage it with an additional property to flag the disable state.  You can't use onFocus because it fires too late an the focus has already shifted to the dropdown portion of the control.  You also can't set blur reliably on a select so you have to set focus to another field, and yu have to do it off of an on click.  This is still far from perfiect.  The browser can get fooled, and if you hold down the mouse button it will show the drop down portion for as long as you hold it down.  

So your options appear to be: A- live with the greyed out control. B- use a very unreliable to get an effect of dubious value.  C- use something other than a select to display what you want.

<form name="theform">
<select disableflag="off" onChange="if (this.selectedIndex==2) this.disableflag='on'"
     onClick="if(this.disableflag=='on') this.form.tfld.focus()">
<option value="good money">good money
<option value="better money"> better money
<option value="no money"> no money
<option value="other stuff"> other
<input type="text" name="tfld" value="$1,000">


yet another somewhat random idea: run a script onChange. If disabled == false; store value in a variable. if true, set the value to the stored variable


var selstore;
function selectdisable(this) {
   if(this.disabled == false) {
      selstore = this.selectedIndex()
   else { //disabled == true
      this.selectedIndex() = selstore

this question seems to have sparked my muse ;), though i have to say, i wish i could come up with a way to do it in CSS.
I don't see why there shouldn't be a input[disabled] {} selector... I mean, what if i don't want my disabled elements to be grey?

you can change the color!
use this input tag

<input type="edit" name="test" style="color: #121291;" value="value here" onkeyup="this.value='value here';">

if the user wanted to change the value, the script puts the value back :)

just a simple trick.

The selectors CSS3 module, which is currently as Candidate Recommendation status, has :enabled and :disabled pseudo-classes.

The purpose of the :enabled pseudo-class is to allow authors to customize the look of user interface elements which are enabled - which the user can select/activate in some fashion (e.g. clicking on a button with a mouse). There is a need for such a pseudo-class because there is no way to programmatically specify the default appearance of say, an enabled input element without also specifying what it would look like when it was disabled.

Similar to :enabled, :disabled allows the author to specify precisely how a disabled or inactive user interface element should look.

It should be noted that most elements will be neither enabled nor disabled. An element is enabled if the user can either activate it or transfer the focus to it. An element is disabled if it could be enabled, but the user cannot presently activate it or transfer focus to it.

Too bad it looks like no browsers yet support these pseudo-classes.

Mozilla bug 84400:
Support :disabled and :enabled pseudo-classes [SELECTORS]

You could replace the SELECT box with a pseudo select div when not active. (similiar to what Fendrin suggested above)

hey, here's the REAL way to do this... i figured there had to be a way.

of course whether or not any browsers support it is a separate issue.
being css2, it is doubtful even in the most modern of browsers.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial