CODEWITHSUNDEEP
htmlcssimageradio-button
user3110655
user3110655

Reputation: 121

image on radio button is not working

I am using an image for radio buttons but it's not working. Please help me guys.

Here is my Html

<div class="redio-box"> 
    <input name="sms_notification" class="radio" type="radio" value="1" checked>
      <label for="subscribe">
        <span></span>
        Subscribe
      </label> 
    <input name="sms_notification" class="radio" type="radio" value="0" >
      <label for="unsubscribe">
        <span></span>
        Unsubscribe
      </label>
</div>

Here is my Css

.redio-box .radio {
    display:none; *display:inline; background:none;  width:auto;
}
.redio-box .radio + label { display:inline; font-size:12px; color:#C3B496; }
.redio-box .radio + label span {
    display:inline-block; *display:none;
    width:10px;
    height:10px;
    margin:-2px 2px 0 4px;
    vertical-align:middle;
    background:url(../../images/check_radio_sheet.png) -30px top no-repeat;
    cursor:pointer;
}
.redio-box .radio:checked + label span {
    background:url(../../images/check_radio_sheet.png) -45px top no-repeat;
}

and here is the image

Upvotes: 0

Views: 1345

Answers (3)

Anuj Kaithwas
Anuj Kaithwas

Reputation: 842

I have tried to make it look custom. you will need to add the ::after and ::before psuedo classes to the label.

I have encased the radio button and the corresponding label in span;

<span class="custom-checkbox ">
  <input id="rb1" type="radio" name="r" class="kd-radio ">
  <label for="rb1" class="kd-radio-label">Male</label>
</span>

Check here for live demo

Upvotes: 0

JRajan
JRajan

Reputation: 702

I think it might be an issue with the css. This worked for me.

HTML:

<input name="sms_notification" class="radio" type="radio" value="1" checked>
    <label for="subscribe">
        <span></span> Subscribe
    </label> 
<input name="sms_notification" class="radio" type="radio" value="0" >
    <label for="unsubscribe">
        <span></span> Unsubscribe
    </label>

CSS:

.radio {
    display:none; *display:inline; background:none;  width:auto;
}
.radio + label { display:inline; font-size:12px; color:#C3B496; }
.radio + label span {
    display:inline-block; *display:none;
    width:10px;
    height:10px;
    margin:-2px 2px 0 4px;
    vertical-align:middle;
    background:url("https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56") -30px top no-repeat;
    cursor:pointer;
}
.radio:checked + label span {
    background:url("https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56") -45px top no-repeat;
}

JS Fiddle Link

Have a look.

Upvotes: 0

user3117841
user3117841

Reputation:

Here is a list of fiddles, just follow it, it's easy to understand and implement.

FIDDLE1

FIDDLE2

FIDDLE3

Very Good Fiddle

JSBIN

HTML :

<body>    
  <label class="fb" for="fb1">
    <input id="fb1" type="radio" name="fb" value="small" />
    <img src="http://placehold.it/20x20/35d/fff&text=f">
  </label>

  <label class="fb" for="fb2">
    <input id="fb2" type="radio" name="fb" value="big"/>
    <img src="http://placehold.it/40x60/35d/fff&text=f">
  </label>

  <label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fb" value="med" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>

  <label class="fb" for="fb4">
    <input id="fb4" type="radio" name="fb" value="long" />
    <img src="http://placehold.it/60x15/35d/fff&text=f">
  </label>
</body>

CSS :

.fb > input[type=radio]{
  display:none;
}
input[type=radio] + img{
  cursor:pointer;
  border:2px solid transparent;
}
input[type=radio]:checked + img{
  border:2px solid #f00;
}

Upvotes: 1

Related Questions