Radio button background image

css, html

Solution

Write like this:

CSS:

input[type="radio"]{
    display:none;
}

input[type="radio"] + label
{
    background: #999;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

input[type="radio"]:checked + label
{
    background: #0080FF;
    height: 16px;
    width: 16px;
    display:inline-block;
    padding: 0 0 0 0px;
}

HTML

<input type="radio" id="shipadd2" name="address" />
<label for="shipadd2"></label>

Read this article for more http://css-tricks.com/the-checkbox-hack/

Problem

I have given bg image for radio button. It is working in chrome but not in mozilla. Here is my code ``` <div class="fieldlist"> <label for="shipadd2"> <input type="radio" id="shipadd2" name="address" /> <div class="compacttext"> Lorem ipsum </div> </label> </div> ``` CSS is ``` .fieldlist input[type="radio"] { float: right; -webkit-appearance: none; border: none; width: 25px; height: 25px; background: url(images/radio.png) left center no-repeat; background-size: 20px; } .fieldlist input[type="radio"]:checked { background: url(images/radio_checked.png) left center no-repeat; } ```

Original source