css background to radio button

Question

I am trying to set background color to radio button with instead of using an image. I tried with checkbox and it worked. Can I try similar code for radio button also which work in all browsers? Like adding div with curves on all ends is just an idea. Please suggest My fiddle is here

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

$('div').on('click',function(){
    if ($(this).hasClass('unchkd')){
        $(this).removeClass('unchkd').addClass('chkd');
    }
    else {
        $(this).removeClass('chkd').addClass('unchkd');
    }
});
.chkd{
    background-color:blue
}
.unchkd{
    background-color:white;
    border: 1px solid black
}

Answer 1

You can, but instead of div use label and hide the radio by setting it's opacity to zero.

Markup something like:

<label for="male">
    <input id="male" type="radio" name="gender" value="male" />
    <span class="radio"></span>
    Male
</label>

<label for="female">
    <input id="female" type="radio" name="gender" value="female" />
    <span class="radio"></span>
    Female
</label>

And then the CSS:

input[type="radio"] {
    position: absolute;
    opacity: 0;
}

input[type="radio"] + .radio {
    border: 1px solid #333;
    border-radius: 50%;
    display: inline-block;
    width: 10px;
    height: 10px;
}

input[type="radio"]:checked + .radio {
    background: #333;
}

Fiddle here .

Answer 2

您可以使用现有脚本作为该示例： http ： //arthurgouveia.com/prettyCheckable/或http://damirfoy.com/iCheck/