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;
}
radio button is just a circle, there is no text, so we can't change the background of it.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With