How to Style the Check box

vrijvlinder

If you use webkit browsers like chrome or Safari you will notice that the check box is a browser controlled input.

To be able to style it any way you want, even to use a background image , here is some code for you to play with.The most important part is -webkit-appearance: none; because normally it would be checkbox and use the browser default style for it. The rest is limited only by your creativity .

input[type="checkbox"],input[type="radio"] {
-webkit-appearance: none;
box-sizing: border-box;
border: 1px solid #83789e;
box-shadow: 0 0px 2px #c5a9d5;
cursor: pointer;
cursor: pointer;
height: 14px;
width: 14px;
background: -moz-linear-gradient(top, #c5a9d5 0%, #8d6cac 36%, #332c3c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5a9d5), color-stop(36%,#8d6cac), color-stop(100%,#332c3c));
background: -webkit-linear-gradient(top, #c5a9d5 0%,#8d6cac 36%,#332c3c 100%);
background: -o-linear-gradient(top, #c5a9d5 0%,#8d6cac 36%,#332c3c 100%);
background: -ms-linear-gradient(top, #c5a9d5 0%,#8d6cac 36%,#332c3c 100%);
background: linear-gradient(to bottom, #c5a9d5 0%,#8d6cac 36%,#332c3c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5a9d5', endColorstr='#332c3c',GradientType=0 );
border: 1px solid #83789e;
border-radius: 3px;
}
input[type="checkbox"]:hover,input[type="checkbox"]:checked,input[type="radio"]:hover,input[type="radio"]:checked {
-webkit-appearance: none;
box-sizing: border-box;
border-radius:3px;
border: 1px solid #332c3c;
box-shadow: 0 1px 15px #c5a9d5;
cursor: pointer;
cursor: pointer;
height: 14px;
width: 14px;
background: -moz-linear-gradient(top, #332c3c 0%, #8d6cac 36%, #c5a9d5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#332c3c), color-stop(36%,#8d6cac), color-stop(100%,#c5a9d5));
background: -webkit-linear-gradient(top, #332c3c 0%, #8d6cac 36%, #c5a9d5 100%);
background: -o-linear-gradient(top, #332c3c 0%, #8d6cac 36%, #c5a9d5 100%);
background: -ms-linear-gradient(top, #332c3c 0%, #8d6cac 36%, #c5a9d5 100%);
background: linear-gradient(to bottom, #332c3c 0%, #8d6cac 36%, #c5a9d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#332c3c', endColorstr='#c5a9d5',GradientType=0 );
}

input#Form_Checkbox {
position: relative;
top: 0px;
left: 4px;
}

Kasper

If you're interested in custom form inputs, I'd definitely recommend you take a look at "WTF, forms?" (http://wtfforms.com/). For something a little more backwards compatible (IE6+), iCheck might be of interest as well (http://fronteed.com/iCheck/).

vrijvlinder

Yes I was up late last night doing research on this. I never had bothered because I was under the impression it was a browser thing and you could not change that. But I figured out how and now I am spreading the word.

Thanks for those links they look like a great resource.