When you place a radio button on a colored table background, some browsers show a white square around the button, ruining the colored table effect.

To see what we mean, look at this sample code:

To see what we mean, look at this sample code:

<form action="nothing.cgi" method="GET">

<b>What's your favorite color?</b>

<table bgcolor="#FFCC00" width="200"
 border="0" cellspacing="0">
 <tr>
 <td>
 <input type="radio"
 name="color" value="red">Red
 </td>
 </tr>
 <tr>
 <td>
 <input type="radio"
 name="color" value="blue">Blue
 </td>
 </tr>
</table>

</form>

This creates a simple form with two radio buttons set against a gold background. If you view this form under any version of Netscape Navigator, it will look like this:

Notice the white square around each radio button. You'll also see this problem under some versions of the AOL browser, and older versions of Opera.

The easiest way to avoid this bug is to tie an inline style sheet to your radio buttons, like this:

<input type="radio" name="color" value="blue"
 style="background : #FFCC00; color : black">

This technique uses the cascading style sheet "background" property to set the color of the radio button so that it blends with our colored table. Figure 2 shows how our table now looks.