Workaround For Radio Button Color Problem

If you've been working as a web developer for any length of time, then the chances of you having come across this bug/feature, are fairly high. Most developers will know exactly what I'm talking about - you might have a black page background color (using body bgcolor=000000), and then a form within a table cell with td bgcolor=ffffff, but instead of inheriting the bgcolor of the nearest environment (in this case, the table cell), the radio button appears in a small box (some Windows and Mac browsers) or beside a small line (Mac only), the color of which is identical to the page background.

It looks ugly.

Netscape, and other browers which suffer from this problem, are not entirely to blame for this unintentional error - the HTML specs don't exactly specify details with regards to displaying form fields. None of this, however, really matters now that the browsers have been released, and we're trying to code around the problem - all we need to worry about is that there is a problem, and we require the workaround.

Here it is: (insert desired color in place of #xxxxxx)

Insert this attribute into your radio button tag:

style="background : #xxxxxx; color: #000000;"

For example:

<input type="radio" name="fish" value="trout" style="background : #xxxxxx; color: #000000">

Or alternatively, insert this into your stylesheet code, and apply a class=radio to your input tag:

input.radio { background : #xxxxxx; color: #000000; }

So exactly which browsers does this problem effect? Well, here's the list (taken from OTIVO Inc):

• Netscape 4.01 - 4.5 (Mac) - these browsers show the line instead of the box

• AOL 2.7 and AOL 3.0 (Mac)

• iCab 1.2p (Mac)

• Netscape 4.06 (Windows 3.1)

• Internet Explorer 3.03 (Windows 3.1)

• Netscape 4.0 - 4.5 (Windows 9x/NT)

• Opera 2.12 (Windows 9x/NT)

(Please note that this workaround will not work in Netscape when JavaScript or Stylesheets are disabled.)