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

Dmitry Gavrikov
Dmitry Gavrikov
3,956 Points

Checked field

Hi,

Could you look at the code please and tell why when I apply :checked to "checkbox" and "radio" it doesn't work and remain the same color? Thanks. https://github.com/dmgavrik/Online-registration-Project_3/blob/master/css/main.css

2 Answers

Joel Bardsley
Joel Bardsley
31,245 Points

There's nothing wrong with your css. The issue here is with radio/checkbox input elements in general - the appearance and behaviour of the elements changes dependent on the user's browser and operating system, so most modern browsers elect to ignore certain css styles such as borders. If you're interested, here's a reference to show how radio buttons can vary between browsers/operating systems

If you just want to apply a border to the radio button, using outline instead of border would work, but if you're setting custom width/height to the element, this would produce inconsistent results across browsers (see radio button 8 examples in the above reference link)

So if you want to achieve consistent radio button/checkbox styles, a common practice is to hide the radio/checkbox inputs completely and attach a ::before pseudo element to the corresponding <label> tag to mimic the effect. For more information of how to go about doing this, here's a useful MDN article and for some demo examples, check out this CodePen

Erik Nuber
Erik Nuber
20,629 Points

I believe you have to remove the quote marks

input[type=checkbox]:checked {
 your styles here.
}