140732 - CSS color overrides disabled flag on input element

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Jørn Lind-Nielsen]

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

[Jørn Lind-Nielsen]

Attachment: Example illustrating disable vs. color problem

Comment 2

[Jørn Lind-Nielsen]

I know you can still se the disabling because of the borders -- but in my
application I also change these for a special layout.

Comment 3

[Kai Lahmann (is there, where MNG is)]

it has to be changed for all input-Elements. Why shouldn't it?

Comment 4

[Jørn Lind-Nielsen]

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 
disabling?

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.

Comment 5

[Boris Zbarsky [:bzbarsky]]

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

> What if I  specifically said "use default color"

Except there is no way to say this in CSS....

Comment 6

[Kai Lahmann (is there, where MNG is)]

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

[Jørn Lind-Nielsen]

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

Thanx.

Comment 8

[Phil Ringnalda (:philor)]

*** Bug 281380 has been marked as a duplicate of this bug. ***

Comment 9

[Phil Ringnalda (:philor)]

*** Bug 294677 has been marked as a duplicate of this bug. ***