CODEWITHSUNDEEP
htmlcheckboxbackground-color
risingTide
risingTide

Reputation: 1896

Changing the background color of an html checkbox

Is it possible, and if so how, to change the background 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.

Upvotes: 3

Views: 26581

Answers (5)

Novelink
Novelink

Reputation: 1

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

Upvotes: 0

J punto Marcos
J punto Marcos

Reputation: 437

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.

Upvotes: 1

BrunoLM
BrunoLM

Reputation: 100331

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

Upvotes: 6

abaumg
abaumg

Reputation: 2273

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/

Upvotes: 1

Udo G
Udo G

Reputation: 13111

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.

Upvotes: 1

Related Questions