Setting color to inside area of a checkbox

Question

I am trying to set color to the clickable area of a checkbox using an inline CSS. I am using the below code

<html>
<head>
<body bgcolor="green">
<input type="checkbox" name="ch01" id="ch01" style="background-color: #FFFFC7;">
</body>
</head>
</html>

But it does not work, I have searched on the Net and on SO also, but could not find a solution. Could someone please suggest a solution, as to how I could set the color to the clickable area of the checkbox? I am ok with a javascript solution as well.

you can try css frameworks that can style your checkboxes you can use twitter bootstrap — Netorica, Apr 10 '14 at 11:44
http://stackoverflow.com/questions/7398462/css-background-color-attribute-not-working-on-checkbox-inside-div — Derple, Apr 10 '14 at 11:44

score 0 · Answer 1 · answered Apr 10 '14 at 11:51

0

I think this cannot be possible with background-color property. But you can do this by background-image

Here is the link, which can help you.

http://jsfiddle.net/jtbowden/xP2Ns/

answered Apr 10 '14 at 11:51

Ravneet

13
7

score 0 · Answer 2 · answered Apr 10 '14 at 12:09

instant of using default checkbox input tag use Div

HTML

<div style="width:10px;height:10px;" class="unchkd">
</div>

Checkbox

Javascript

$('div').on('click',function(){
    if ($(this).hasClass('unchkd')){
        $(this).removeClass('unchkd').addClass('chkd');
    }
    else {
        $(this).removeClass('chkd').addClass('unchkd');
    }   
});

CSS

.chkd{
    background-color:Red
}
.unchkd{
    background-color:white;
    border: 1px solid black
}

Setting color to inside area of a checkbox

2 Answers2