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?
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.
这篇关于使用 CSS 样式单选按钮并使用图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!