Netscape’s color “feature” with radio buttons

The Netscape 4 browsers on Windows platforms have the strange feature that radio buttons appear in small boxes which have the color of the page background rather than the “local” background color. “Local” refers here to the background color of the nearest environment, such as table cell background color suggested using <td bgcolor="...">, or a form background color suggested using style sheets.

In some cases this problem can be fixed using style sheets, but not the obvious way, due to bugs in Netscape 4’s CSS support. This document shows some attempts to fix the problem, and then suggests the best remedy that there seems to be.

A simple form

No problems with this one, hopefully:

The form in a table cell with background color

On Netscape 4, the background color of the page “shines thru”, i.e. the radio buttons appear in small boxes with the color of the page background (here white). (Similar phenomenon occurs when the background color for a form is suggested via a style sheet.)

This is probably an unintended feature. Some people might call it a bug, but the HTML specifications don’t really specify how form fields are to be displayed. So it’s just poor quality of implementation.

The first attempt to fix it

Here the input type="radio" elements have the style sheet rule background:#0f0 none which suggests a green background color (and suppression of any background image). This attempt assigns the rule directly to the elements, using code like

<input type="radio" name="radio" value="1" checked
style="background:#0f0 none">

The second attempt to fix it

This second attempt uses a separate style sheet. It’s not successful either.

Setting the content color as well

This attempt uses a separate style sheet which suggests “content color” too, via the color attribute.

For demonstration purposes, the suggested color is red. The interesting thing is that you don’t see anything in red; in particular, the button itself (the small circle) or its content (the smaller circle within in, when the button has been selected) have fixed colors (white and black) on Netscape 4! (Naturally, in real life it is better to suggest a content color which makes sense if applied by a browser.)

This sounds odd, and it is odd. And it’s even stranger. It has even been reported that the success or failure seems to vary rather unpredictably, e.g. depending on whether the CSS rule is given in a style attribute or in a style sheet embedded into an HTML document via a style element or in a linked style sheet. There are probably several differences between different versions of Netscape 4 in this issue.

The best advice I can give is the following:

Remedy to problems with radio button background colors on Netscape 4: Unless you wish to avoid the whole problem (by not suggesting a “local” background color at all), suggest via a style sheet a background color and a content color for <input type="radio"> elements, using the background and color properties. Set the former to the desired background color and the latter to black (#000). If this does not help, try playing with different methods of associating CSS with HTML.

Examples of alternative methods of implementing the remedy (assuming the desired background color is green, #0f0):

• Add the following attribute to the input type="radio" elements:
  style="background : #0f0; color: #000;"
• Add an attribute like class="radio" to those elements and include the following into the head section of your page (or merge it with a style element you already have there):

  <style type="text/css">
  input.radio { background : #0f0; color: #000; }
  </style>

Notes:

• If one of the methods above does not work, try the other. They should be equivalent, but Netscape 4 may still treat them differently.
• I have not managed to make the trick work using an external (linked) style sheet, which would be the most logical way of using CSS.
• In CSS1, there is no way to say “apply these rules to all input elements which have the attribute type="radio"”. In CSS2 there is, but Netscape 4 doesn’t support it. Instead, one must use classes, which is clumsier.
• If you suggested background and color properties for all input elements, this would have effects which you’d regard as harmful. Specifically, Internet Explorer 4 and newer would use the colors for the presentation of text input fields (input type="text") too.

In any case this only helps when with style sheet support is enabled. Note that on Netscape, disabling JavaScript also disables style sheets!

The bug seems to have been fixed in Mozilla. However, some early versions of Mozilla which on the other hand (at least in Milestone 9) use a grey background in radio buttons, by default. (See image on the right.) The background can be affected by style sheets, though, and setting the background property for an input type="radio" element affects the button only (without creating any rectangular box around it). Thus, the method of setting both background and content color makes the buttons appear as just circles on a one-color background. To get a more conventional presentation, one could use background="#fff".

But in general, this whole problem seems to be a bad dream, unless you have special reasons to aim at making your pages display nicely even on Netscape 4.

This document is part of my material on HTML forms and especially relates to the document Affecting the presentation of form fields on Web pages.

Date of last update: 2005-01-16. This document was originally written years ago, and it is mostly just a historical curiosity, since Netscape 4 is used rather little now.