how to customize this checkbox to make it look this [correct checkbox ][1] as i am not sure how to do it

        I would like to customize it such that the checkbox color should change on click . 

please refer the link and image and suggest how to achieve this as i am not sure how to do it . [code for checkbox][1] Below is the HTML code for checkbox :

        <div id="container">
            <div id="btnOuterDIV">
                <div id="btnChkbox">
                    <input type="checkbox" id="btnCB" />
                </div>
            </div>
        </div>

        CSS for the checkbox , it should look like the one in image :

        #container  {
    padding:50px;
    }
        #btnOuterDIV{
    height:30px;width:80px;border:1px solid #ccc;border-radius:5px;
    }
        #btnOuterDIV:hover{
    border-color:#888;
    }
        #btnChkbox{
    height:15px;width:15px;padding-top:5px;padding-left:5px;
    }

  [1]: http://ift.tt/2bnWX4D