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

Question

      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.

Answer 1 · 2016-04-05T23:00:50Z

April 5, 2016 11:00pm

Hey there! I'm sorry it's taken several days for anyone to give you a response! Did you manage to figure out how to customize your checkboxes? I found a few resources that should be helpful in styling the checkmark and checkbox. Hope they help. Happy coding!

http://codepen.io/CreativeJuiz/pen/BiHzp

http://blog.karenmenezes.com/2014/nov/1/another-pure-css-checkbox-article/

http://stackoverflow.com/questions/2639373/css-html-how-do-i-change-the-color-of-the-check-mark-within-the-checkbox-input

http://blogs.adobe.com/dreamweaver/2015/08/css-vs-svg-styling-checkboxes-and-radio-buttons.html

http://stackoverflow.com/questions/658044/tick-symbol-in-html-xhtml

http://stackoverflow.com/questions/21968531/how-to-draw-a-checkmark-tick-using-css

http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css?lq=1