Changing the background color of an html checkbox

Is it possible, and if so how, to change the backgroun开发者_StackOverflow中文版d color on an HTML checkbox? I'm specifically talking about the white box that is behind the little check symbol.

I've searched quite a bit on this but haven't found a conclusive answer yet.

Only using scripts you can achieve a cross browser solution, see an example here of a styled checkbox....

It is using jQuery UI to change the style

I doubt that is possible since the check box appearance is OS-specific anyway (my checkboxes have a shaded gray background, not a white one).

A solution could be to build your own checkbox using JavaScript and some graphics.

AFAIK only Opera supports the "background" CSS statement for formular elements.

For further information, check this out: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

Jeff B showed another way to color a checkbox. He also provided a jsfiddle example.

The idea is to wrap a span and use a png image with some javascript and css.

I am implementing the colour Check box I thought it will be easy to do the color check box but when I started to implement it. it was so time taken Job to do the first time. below is the HTML and CSS for the COLOUR CHECK BOX any one can customized as well this HTML and CSS.

HTML :-

<div class="squaredThree left">
    <input type="checkbox" value="None" id="squaredThree" name="check" />
    <label for="squaredThree"></label>
</div>

CSS:-

.squaredThree {
    width: 20px;    
    position: relative;
}

.squaredThree label {
    cursor: pointer;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    background:#f7f7f7;
    border:1px solid #6d7279;
}

.squaredThree label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 9px;
    height: 5px;
    background: transparent;
    top: 2px;
    left: 2px;
    border: 3px solid #0b9dda;
    border-top: none;
    border-right: none;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.squaredThree label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.squaredThree input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}