如何设置输入类型=收音机？

Question

我想用自定义背景/图像替换默认输入比例选择按钮。当选择其中一个输入时，还要添加自定义图像。

<div class="form-item">
    <label for="right-gender">
        Gender
        <span class="form-required" title="This field is required.">*</span>
    </label>
    <div id="right-gender" class="form-radios">
        <div class="form-item form-type-radio">
            <input id="right-gender-1" class="form-radio" type="radio" value="male" name="submitted[right][gender]">
            <label class="option" for="right-gender-1">Male </label>
        </div>
        <div class="form-item form-type-radio">
            <input id="right-gender-2" class="form-radio" type="radio" value="female" name="submitted[right][gender]">
            <label class="option" for="right-gender-2">Female </label>
        </div>
    </div>
</div>

http://jsfiddle.net/L0f8ftdn/

Answer 1

你需要用两个不同的图像制作一个精灵。选中一个并取消选中。

然后是CSS

input.form-radio{
 display:none;
}
input.form-radio+label{
 position:relative;
 cursor:pointer;
 padding-left:20px; /* need to be greater then the image width */
}
input.form-radio+label:after{
 position:absolute;
 content:" ";
 top:0; 
 left: 0px;
 width: 15px;/*adjust the width of the image */
 height: 15px; /*adjust the height of the image */
background:url(../images/checkbox.png);
background-repeat:no-repeat;
background-position:bottom left;

}
input.form-radio:checked+label:after{
 background:url(../images/checkbox.png);
 background-position:top left;
}

这是我最近的项目。希望这会有所帮助。

Answer 2

非常简单的使用jQuery。从你的问题中取出你的小提琴：http://jsfiddle.net/L0f8ftdn/1/

$('.radiooption').on('click', function() {
    $('.radiooption').removeClass('checked'); // Make all "unchecked"
    $(this).addClass('checked'); // Make this one "checked"
    $(this).prev('input').prop('checked', true); // Make the matching radio checked
});

在您的情况下，.radiooption会有图像背景，然后您可以使用CSS隐藏输入。

哦，对未来有用的一点：如果你想让别人帮助你，不要成为屁股而不是懒惰。