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

Esteban Valdez
seal-mask
.a{fill-rule:evenodd;}techdegree
Esteban Valdez
Front End Web Development Techdegree Student 8,858 Points
Posted by Esteban Valdez
.a{fill-rule:evenodd;}techdegree
Esteban Valdez
Front End Web Development Techdegree Student 8,858 Points

How can I learn to style the checkbox and radio buttons to match the mock up?

I noticed that the mock up has specially designed radio and checkbox buttons, however it seems I can't add any styles with css. I've used google and checked the forums but can't seem to find any specific instruction on how to do this. Please direct me to the right place. Thank you.

3 Answers

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

I think the term you want to search for is "custom checkbox". What you're talking about typically involves using custom background images to replace the default checkbox. It's a similar technique to the one used in the How to Make a Website course to display the custom facebook/twitter/email list bullets for the contact page.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

try to google style Checkbox with css

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

One Technique is to use a label as styling object and put it over the actual checkbox which you hide with the display none method in css