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

Posted by Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I would like to style the checkbox on my page with my own check mark and background color. using the :checked pseudo 

      input[type^="checkbox"] {
             -webkit-appearance: none;
            border: 1px solid   rgb(141, 214, 205);
             background-color:  rgb(255, 217, 179);
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

        input[type^="checkbox"]:hover {
             -webkit-appearance: none;
             border: 1px solid rgb(141, 214, 205);
             background-color: rgb(141, 214, 205);
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

        input[type^="checkbox"]:checked {
              background-color: rgb(37,22,82);
             border: 1px solid rgb(37,22,82);
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

  ```css

  My code now.

5 Answers

Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

never mind thank you for your suggestion of the before pseudo class ... I got it to work.. thanks again and happy codings!

jcorum
jcorum
71,830 Points
jcorum
jcorum
71,830 Points

Ah! I missed your point.

Here's a web article on the subject: http://www.hongkiat.com/blog/css3-checkbox-radio/

And here's another: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Hope they help.

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I didn't think to use the :before and :after pseudo class because I wanted to check to appear inside the box not along side the box .. where I would figure the two pseudo classes that you advised me to use would do .... am I wrong ?

Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points 
        input[type^="checkbox"]:before {
             display: inline-block;
             -webkit-appearance: none;
            border: 1px solid   rgb(141, 214, 205);
             background-color:  rgb(255, 217, 179);
             content: "";
             font-size: 12px;
             text-align: center;
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

        input[type^="checkbox"]:hover:before {
             -webkit-appearance: none;
             border: 1px solid rgb(141, 214, 205);
             background-color: rgb(141, 214, 205);
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

        input[type^="checkbox"]:checked:before {
              display: inline-block;
              margin-bottom: 5px;
              background-color: rgb(37,22,82);
             border: 1px solid rgb(37,22,82);
             content: "\2713";
             text-align: center;
             color:  rgb(255, 217, 179);
             border-radius: 5px;
             width: 15px;
             height: 15px;
        }

  ```css

  this works .
Le Var Range
seal-mask
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points
Le Var Range
.a{fill-rule:evenodd;}techdegree
Le Var Range
Front End Web Development Techdegree Student 18,011 Points

I have a problem. I am applying some what the same rules to the radio buttons , but once clicked if u click another button it does not behave like a normal radio button which i would like it to do and still maintain the rules I want. How would I go about doing this achieving . Styling a radio button and still keep its default actions of a radio button . My code now looks like this 

             input[type^="radio"]:before {
         display: inline-block;
         -webkit-appearance: none;
         border: 1px solid rgb(141, 214, 205);
         background-color: rgb(255, 217, 179);

         content:"";
         border-radius: 25px;
         text-align: center;
         width: 17px;
         height: 17px;
     }

      input[type^="radio"]:hover:before {
          display: inline-block;
         -webkit-appearance: none;

         border: 1px solid rgb(141, 214, 205);
         background-color: rgb(141, 214, 205);
         border-radius: 25px;

         width: 17px;
         height: 17px;
     }

     input[type^="radio"]:checked:before {
         -webkit-appearance: none;
         display: inline-block;
         border: 1px solid  rgb(37,22,82);
         background-color:  rgb(37,22,82);
         font-size:  28px;
         line-height: 10%;

         content: ".";
         text-align: center;
         color: rgb(255, 217, 179);

         border-radius: 25px;
         width: 17px;
         height: 17px;
     }
```css