J'ai donné l'image bg pour le bouton radio. Il fonctionne en chrome mais pas en mozilla.
Voici mon code
<div class="fieldlist">
<label for="shipadd2">
<input type="radio" id="shipadd2" name="address" />
<div class="compacttext"> Lorem ipsum </div>
</label>
</div>
CSS est
.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;
}
Écrivez comme ceci:
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>
Lisez cet article pour plus http://css-tricks.com/the-checkbox-hack/
Voulez-vous quelque chose comme ceci http://jsfiddle.net/surendraVsingh/UmpdH/5/ (cliquez sur l'icône en forme de cloche)
CSS
label{
display:block;
background: url(https://dl.dropbox.com/u/19982181/fab/notify.png) no-repeat;
}
.fieldlist input[type="radio"] {
float: right;
border: none;
opacity:0;
width: 25px;
height: 25px;
display:block;
float:left;
border:1px solid #333;
background-size: 20px;
}
Jquery:
$("#shipadd2").click(function(){
if($(this).is(":checked")){
$(this).parent().css('background-position', '0 -29px');
}
else{
$(this).parent().css('background-position', '0 0');
}
});
Le plus grand centre commercial