使用 CSS 样式单选按钮并使用图像 [英] 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?

解决方案

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 样式单选按钮并使用图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！