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

Dmitry Gavrikov
Dmitry Gavrikov
3,956 Points
Posted by 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,246 Points
Joel Bardsley
Joel Bardsley
31,246 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
Erik Nuber
Erik Nuber
20,629 Points

I believe you have to remove the quote marks

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