CSS color overrides disabled flag on input element




17 years ago
14 years ago


(Reporter: jln, Assigned: rods)


Windows 2000

Firefox Tracking Flags

(Not tracked)



(1 attachment)



17 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.9) Gecko/20020408
BuildID:    2002040809

When you specify a color for an input element, such as a button or a text field,
this color overrides the enabled/disabled setting. A consequence of this is that
you cannot detect disabled elements when you specify a foreground color.

Is this a bug or by intention?

Reproducible: Always
Steps to Reproduce:
See the supplied example.

Comment 1

17 years ago
Created attachment 81374 [details]
Example illustrating disable vs. color problem

Comment 2

17 years ago
I know you can still se the disabling because of the borders -- but in my
application I also change these for a special layout.
it has to be changed for all input-Elements. Why shouldn't it?
Last Resolved: 17 years ago
Resolution: --- → INVALID

Comment 4

17 years ago
You are right - the foreground color has to be changed when you specify so.

But - when you disable an input element, shouldn't it then be visualized as 
such? Normaly the browser does so by changing the foreground color to gray.

So in the current situation you have:

1) "Use default color" implies "and allow the browser to visualize disabling".
2) "Use custom color" implies "do not allow browser to visualize disabling".

This means you distinguish between default colors and custom colors. But isn't 
the default color just a color as well as any other color? What if I 
specifically said "use default color" instead of just saying nothing (and 
thereby implying "use default). Should it then be impossible to visualize 

So IMHO default colors are exactly the same as custom colors - you just don't 
have to specify them. Which means disabling should be visualized also when you 
specify custom colors.
Well... The thing is, to follow CSS2 the browser has to act like its rendering
is determined by a "user-agent stylesheet".  This stylesheet for mozilla looks
something like:

input { color: something; background: something; }
input[disabled] { color: something-else; background: something-else; }

Now you set a rule for input.colored which takes precendence over both those
rules, and so is applied regardless of the disabled state....

We _could_ make the input[disabled] rules !important, but then you would not be
able to style disabled input elements at all (and this would make them invisible
on some pages, eg).

IE doesn't implement attribute selectors, so they cannot actually attempt to
follow the CSS spec on this issue....

A simple solution in your case is to add an

input.color[disabled] { }

rule to your stylesheet in which you can style it any way you wish (eg a lighter

> What if I  specifically said "use default color"

Except there is no way to say this in CSS....
for me it's the same problems as a{}, which also applies to some <h1><a
name="bla">Head</a></h1> construct. The color applies to all <input/> elements,
no matter if enabled or disabled. As Boris wrote a input[disabled]{color:gray;}
should solve the problem.

Comment 7

17 years ago
Now that solves the problem! I didn't know of attribute selectors - now there's 
no problem at all.

*** Bug 281380 has been marked as a duplicate of this bug. ***
*** Bug 294677 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.