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

Botos Claudia
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points
Posted by Botos Claudia
.a{fill-rule:evenodd;}techdegree seal-36
Botos Claudia
Front End Web Development Techdegree Graduate 18,765 Points

Custom Checkbox and Radio buttons, Registration Form

I have a problem trying to style the checkbox and the radio button in my Registration Form project. I looked up on the internet and tried different methods and none of it seemed to work . Could you please guide me a little here? I do not even know where to look next. I wants to style the checkbox and radio buttons using CSS. Thank you!

2 Answers

doesitmatter
doesitmatter
12,885 Points
doesitmatter
doesitmatter
12,885 Points

Hey Popa,

Good question. I found some answers for you, check out this link. The top answer on that page has many links you can check out for info on how to style these elements, it doesn't seem to be straight forward.

Here's an example I put together from those links:

<!DOCTYPE html>
<html>
<head>

<style>
    input[type = checkbox]{
          -webkit-appearance: none;
          background-color: #fafafa;
          border: 1px solid #cacece;
          box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
          padding: 9px;
          border-radius: 3px;
          display: inline-block;
          position: relative;    
    }

    input[type = checkbox]:checked {
        background-color: #e9ecee;
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }


</style>
</head>

<body>

<form>
  <input type="checkbox" name="gender" value="male" checked> Male<br>
  <input type="checkbox" name="gender" value="female"> Female<br>
  <input type="checkbox" name="gender" value="other"> Other  
</form> 

</body>
</html>

This page contains 3 checkboxes (but the same thing can be applied to radio buttons). The essential step using the above method(there are others check out the link for that) is to set-webkit-appearance: none; (after you select it of course) this way, the default styling of the radio/checkbox button is disabled and you can go crazy with your own design.