Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Vanilla 2.6.1 is here with critical security patches. One of them has been publicly disclosed.

How to Style the Check box

vrijvlindervrijvlinder Papillon-Sauvage MVP

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;
}

Comments

Sign In or Register to comment.