Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
            <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,059 Points

Try

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

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

Hi Cody,

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

Craig