Radio buttons are a little different when it comes to adding a style. If you look at the html you will see that the code for a radio button looks like this:

<input type="radio" value="V1" checked name="R1">

So again we are dealing with the selector 'input'. Now lets see what happens if we add the class 'red' to this to make it red:

<input class="red" type="radio" value="V1" checked name="R1">

As you will see what happens is not that the background of the little circle becomes red, but a red square is created around it. This can be very useful if you are creating a form on a colored background, where normally an ugly white square will surround the radio button in some versions of Netscape. Adding a class with a background color the same as the page will overcome this. 

Look at this in NN to see what happens. The radio button for Option 2 will have a white surround in spite of the red background, Option 3, to which the class was added, will not. In Internet Explorer they will both look the same.

If you apply the style 'red' to all the radio buttons on a white or other colored background then you can get the effect of a red bar containing the buttons alongside the text, which can look interesting in some situations.
Browser Note: This does not work too well in Netscape, the 'red bar' has a broken up appearance.

Check boxes behave in exactly the same way as radio buttons, that is the color applied will surround the box rather than effect its background. Here the input class 'red' has been added to all three checkboxes, the first in a white cell, the second in a pink cell, the third in a red cell.

As you can see with a bit of imagination there is a lot you can do to perk up the appearance of a standard set of options.

Browser Note: Mostly these work fine in Netscape, but it is a good idea to test before you are satisfied.

>>Part V: Colorful dropdown lists

<<Part III: Fun with radio buttons and check boxes