CODEWITHSUNDEEP
jqueryhtmlcssimageradio-button
Patrick R
Patrick R

Reputation: 1979

Style Radio buttons with CSS and use image

Is there a easy and simple way to style radio buttons with only CSS, so I click an image instead of a bullet? Like thumbs up / thumbs down for example.

I have two radio buttons, and I need to register which one is clicked. The radio buttons are getting visible when you press a button, and when you click on a radio button, a text replaces the radio buttons.

BUTTON > RADIO BUTTONS > TEXT

This is how far I've gotten:

HTML

<div id="txtradiocall_lille" style="display:none;">
              <input id="Radio1" type="radio" value="yes" class="input_hidden" /><label for="yes"><img src="http://www.xxxx.dk/images/images/thumb_up_green.png" alt="Yes" /></label>
              Yes
              <input id="Radio1" type="radio" value="no" class="input_hidden" /><label for="no"><img src="http://www.xxxx.dk/images/images/thumb_down.png" alt="No" /></label>
              No
            </div>

CSS

.txtradiocall_lille input[type='radio']
{
    display:inline;
}

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#txtradiocall_lille label {
    display: inline-block;
    cursor: pointer;
}

#txtradiocall_lille label:hover {
    background-color: #efefef;
}

#txtradiocall_lille label img {
    padding: 3px;

}

radio click handler

 $("input[type='radio']").change(function () {
 var selection = $(this).val();
  getcallaskok(selection, talok);
 });

At the moment, I'm getting the images instead of the radio bullets, but it seems the clicks are not getting registered, because I don't get the text I need after the click.

Can someone help me, please?

Upvotes: 2

Views: 3864

Answers (2)

Billy Moat
Billy Moat

Reputation: 21050

Best practice is to simply use the label element like so:

<label id="labelone" for="myradiobutton"></label>

<input type="radio" value="xxx" id="myradiobutton">

Then you use css to style the label. In your case to probably add your image as a background.

Then you just hide the actual radio button by moving it off-screen using absolute positioning. N.B. Don't hide the radio button using the display:none or visibility:hidden as this is bad for accessibility.

So the user will click the label and the radio button which is now off screen will be selected.

Upvotes: 3

Darwin Gautalius
Darwin Gautalius

Reputation: 317

I think hiding radio button and use label like you are doing is enough. But may need some correction. "for" attribute in label points to id, not the value you are doing now. And to group the radio button use name, not id like you are doing now.

Upvotes: 0

Related Questions