253978 - backgroundColor is not implemented for radio buttons and checkboxes

Status: RESOLVED DUPLICATE of bug 183247

(Core :: Layout: Form Controls, defect)

Description

[Nick_Jenkins]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040614 Firefox/0.9
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7) Gecko/20040614 Firefox/0.9

Please see example page URL, which consists of a very simple example form with:
* A text box
* Two radio buttons
* A list box
* A checkbox

All of these fields have an 'onchange' JavaScript, so that changing them should
make them go yellow.

The textbox and list-box both work fine (i.e. go yellow on being changed).
However, changing the radio button and the checkbox produces no visible effect.

The page works as expected in Internet Explorer 5.

The page validates as HTML 4.01 transitional. The problem happens in both
standards mode and quirks mode.

Reproducible: Always
Steps to Reproduce:
See above URL

Actual Results:  
No change of backgroundColor for checkboxes or radio buttons.

Expected Results:  
See background colour change to yellow when changing radio buttons and checkboxes.

Things that showed up in dupe search but which do not appear to be same bug:
Bug 79719 - relates to the INTERIOR of radio buttons not being modified by
backgroundColor.

Comment 1

[Nick_Jenkins]

Attachment: Workaround to backgroundColor not working using span tags

A bit of trial and error turned up a workaround using span tags to surround the
radio buttons and checkboxes (see attachment for details). This works, but it's
rather non-obvious, and I feel sorry for the next person who has to work this
out the hard way (i.e. it seems like a "gotcha" in the browser). The
backgroundColor attribute functioning as per the workaround would seem to be a
preferable situation.

Comment 2

[Boris Zbarsky [:bzbarsky]]

The background of radio buttons and checkboxes _is_ the interior.  So the reason
this is not working is that bug 79719 was fixed.

Comment 3

[Nick_Jenkins]

> The background of radio buttons and checkboxes _is_ the interior.

Fair enough. Two things though:
1) I'm not sure that I agree with the definition of 'background' in this
context. I have as many pet peeves with IE as the next web person, but this is
one situation in which, to me at least, it's the browser that's doing the least
surprising thing.
2) So why doesn't changing the backgroundColor do anything? I would expect it do
something - at the moment it just silently does nothing. If the browser coloured
the inside of these form elements, then that would fine, provided it happened.
Currently, nothing at all happens. That seems a significantly worse solution
than the inside of the form elements changing colour - because no matter whether
you think the inside or the outside of the box should be coloured, everybody can
now agree that what's there currently does not work at all. (One is question of
aesthetics, the other is a question of functionality).

Indeed, a careful reading of bug 79719 shows that the original reporter's
problem was that "the interior of the button becomes also coloured (and not only
its surrounding area)". In other words, they wanted exactly what I wanted - the
exterior box, and _only_ the exterior to change. The solution however was "we've
simply turned off background-color styling on radios altogether".

Therefore, I've updated this bug's subject description from "Cannot change
backgroundColor of radio buttons and checkboxes" to "backgroundColor is not
implemented for radio buttons and checkboxes", as this seems a more accurate
description of the current situation. 

Additionally, I've reopened this because there clearly is a problem here - the
backgroundColor property, as per the JavaScript documentation, (see:
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/style.html),
is not implemented for these two form elements; backgroundColor "specifies a
solid background color for an element", and at the moment that simply is not
working for radio buttons or for checkboxes, and that surely is a valid problem.

Comment 4

[Boris Zbarsky [:bzbarsky]]

You seem to misunderstand how CSS works.  The UA stylesheet and the user
stylesheet _can_ override all author sheets, and that's all that's happening here...

Please don't morph bugs, by the way.  It makes it very hard to track what's
going on.

This is still invalid.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Actually, it's a dup...

Comment 6

[Boris Zbarsky [:bzbarsky]]

*** This bug has been marked as a duplicate of 183247 ***