Search code examples
csscheckboxradio-buttonstyles

Checkbox and radio styled with images on css works only in Chrome

I create this style and i have no idea how to make it works in IE and Firefox:

input[type="checkbox"]:before
{
    content:"";
    display:inline-block;
    background: url("../images/controls.png") 0% 5%, url("../images/controls.png") 0% 2.5%, white;
    display: block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
}
input[type=checkbox]:hover:before
{
    background-position: 0% 10%;
}
input[type=checkbox]:checked:before
{
    background: url("../images/controls.png") 0% 15.1%, url("../images/controls.png") 0% 5%, white;
}

input[type="radio"]:before
{
    content:"";
    display:inline-block;
    background: url("../images/controls.png") 0% 2.5%, url("../images/controls.png") 0% 30.6%, white;
    display: block;
    width: 19px;
    height: 19px;
    vertical-align: middle;
}
input[type=radio]:hover:before
{
    background-position: 0% 35.6%;
}
input[type=radio]:checked:before
{
    background: url("../images/controls.png") 0% 40.6%, url("../images/controls.png") 0% 30.6%, white;
}

It's working perfectly in chrome and in safari. I tried to use the background-image, but don't work too. Could anyone help me with this?

I'm using this image(controls.png):

Solution

  • You may have a look at Custom Crossbrowser Styling for Checkboxes and Radio Buttons

    Hope this helps.