How do I style (css) radio buttons and labels?

Question

Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels?

Answer 1

The first part of your question can be solved with just HTML & CSS; you'll need to use Javascript for the second part.

Getting the Label Near the Radio Button

I'm not sure what you mean by "next to": on the same line and near, or on separate lines? If you want all of the radio buttons on the same line, just use margins to push them apart. If you want each of them on their own line, you have two options (unless you want to venture into float: territory):

• Use
s to split the options apart and some CSS to vertically align them:

    

        
What color is the sky?
        

        
        A strange radient green.
        

        
        A dark gloomy orange
        

        
        A perfect glittering blue
    

• Follow A List Apart's article: Prettier Accessible Forms

Applying a Style to the Currently Selected Label + Radio Button

Styling the is why you'll need to resort to Javascript. A library like jQuery is perfect for this:

The focus and blur hooks are needed to make this work in IE.