CODEWITHSUNDEEP
htmlcss
Sowmya
Sowmya

Reputation: 26979

Radio button background image

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;

}

Upvotes: 12

Views: 74941

Answers (3)

RAVI singh
RAVI singh

Reputation: 116

Try this it worked for me 

-moz-appearance: none;

Thanks

Upvotes: -2

sandeep
sandeep

Reputation: 92813

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/

Upvotes: 31

SVS
SVS

Reputation: 4275

Do you want something like this http://jsfiddle.net/surendraVsingh/UmpdH/5/ (click on the bell icon)

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');   
   }

});​

​

Upvotes: 1

Related Questions