Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Online Registration Form

Cody Flack
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Cody Flack
Front End Web Development Techdegree Graduate 13,213 Points
Posted by Cody Flack
.a{fill-rule:evenodd;}techdegree seal-36
Cody Flack
Front End Web Development Techdegree Graduate 13,213 Points

How do you style focused radio buttons and checkboxes in css?

Once you click the checkbox or radio button the color of the checkmark/button needs to change and the box/circle needs to be outlined, I can't figure out how to do it.

Cody Flack
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Cody Flack
Front End Web Development Techdegree Graduate 13,213 Points
Cody Flack
.a{fill-rule:evenodd;}techdegree seal-36
Cody Flack
Front End Web Development Techdegree Graduate 13,213 Points 
            <div class="newsletter">

                <fieldset>

                    <legend>Newsletter</legend>


                    <p>Select the newsletters you would like to recieve</p>
                    <input type="checkbox" name="news" id="news_html">
                    <label for="news_html">HTML News</label><br>

                    <input type="checkbox" name="news" id="news_css">
                    <label for="news_css">CSS News</label><br>

                    <input type="checkbox" name="news" id="news_javascript">
                    <label for="news_javascript">Javascript News</label><br>

                    <p>Newsletter Format</p>
                    <input type="radio" id="html" value="html" name="format">
                    <label for="html">HTML</label><br>

                    <input type="radio" id="text" value="text" name="format">
                    <label for="text">Plain Text</label><br>

                    <p>Other topics you'd like to hear about</p>
                    <textarea name="topics"></textarea>
                </fieldset>
                <input type="submit" value="Sign Up" id="submit">
            </div>

2 Answers

Shaun Edwards
Shaun Edwards
3,065 Points

Try

input[type="checkbox"]:checked{ your style}

input[type="Radio"]:checked{ your style}

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Cody,

Can you provide the HTML used so I can see what is needed :)

Craig