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

Botos Claudia
seal-mask
.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

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.