Is there an easy and straightforward method to customize radio buttons using only CSS, allowing me to click on an image instead of a traditional bullet point? For example, like thumbs up/thumbs down.
I have two radio buttons that need to track which one is selected. These radio buttons become visible when a button is pressed, and upon clicking them, the text replaces the radio buttons.
BUTTON > RADIO BUTTONS > TEXT
This is what I have so far:
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);
});
Currently, I have successfully replaced the radio bullets with images, but it seems that the clicks are not being registered as I am not getting the expected text after clicking.
Could someone offer assistance, please?