Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Workaround For Radio Button Color Problem

Rated 4.27 (Ratings: 8)

Want more?

  • More articles in Code
 
Picture of isaac

Isaac

Member info

User since: 14 Dec 1998

Articles written: 67

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

Isaac is a designer from Adelaide, South Australia, where he has run Triplezero for almost a decade.

He was a member and administrator of evolt.org since its founding in 1998, designed the current site, and was a regular contributor on evolt.org's direction-setting discussion list, theforum.

On the side, he runs Opinion, Hoops SA, Confessions, Daily Male, and Comments, as well as maintaining a travel gallery at Bigtrip.org.

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.