我想设置我的单选按钮的样式，以便它们使用未选中和选中的图像。
以下是我使用的css：
input[type="radio"]
{
background: url("https://where-to-buy.co/content/images/selector.png")no-repeat;
padding: 0;
display: inline-block;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
vertical-align: middle;
border: 1px solid black;
}
input[type="radio"]:checked
{
background: url("https://where-to-buy.co/content/images/selectorhighlighted.png")no-repeat;
}
我使用的代码似乎已经拾取了未选择的图像，但它周围有一个奇怪的边框，当我点击它而不是用新的背景图像替换未选择的图像时，它只是在那里放了一个大黑点请看：
http://jsfiddle.net/afnguyen/mMr9e/
跨浏览器（包括 ie7 和 8）工作很重要，我正在使用 jquery，所以很乐意使用 jquery 选项。
编辑
最终解决如下：
http://jsfiddle.net/afnguyen/GSrZp/
使用 jquery 库：http ://code.jquery.com/jquery-1.8.3.min.js
jQuery：
$(document).ready(function () {
$(function () {
$('input:radio').hide().each(function () {
var label = $("label[for=" + '"' + this.id + '"' + "]").text();
$('<a title=" ' + label + ' " class="radio-fx ' + this.name + '" href="#"><span class="radio"></span></a>').insertAfter(this);
});
$('.radio-fx').on('click', function (e) {
$check = $(this).prev('input:radio');
var unique = '.' + this.className.split(' ')[1] + ' span';
$(unique).attr('class', 'radio');
$(this).find('span').attr('class', 'radio-checked');
$check.attr('checked', true);
var selValue = $('input[name=rbnNumber]:checked').val().split(",")[0];
var rpValue = $('input[name=rbnNumber]:checked').val().split(",")[1];
$('input[name=retailerProductId]').val(selValue);
$('span[class=actualPrice]').text(rpValue);
$('input[name=rbnNumber]').attr('disabled', 'disabled' );
$(".radio").attr('disabled', 'disabled' );
$(".radio").css("opacity", "0.3")
$(".radio-checked").css("opacity", "1")
$("#332527").css("opacity", "0.5")
$("#114578").css("opacity", "0.5")
$("#108660").css("opacity", "0.5")
$("#373455").css("opacity", "0.5")
var rpSelected = $("#retailerProductId").val();
$('#' + rpSelected).css("opacity", "1");
}).on('keydown', function (e) {
if (e.which == 32) {
$(this).trigger('click');
}
});
});
});
HTML：
<div class="divRadiobtns">
<input class="radioOptions" type="radio" name="rbnNumber" value="332527, £2.89" />
<input class="radioOptions" type="radio" name="rbnNumber" value="114578, £2.59" />
<input class="radioOptions" type="radio" name="rbnNumber" value="108660, £2.60" />
</div>
<div class="divInputs">
<input type="hidden" name="retailerProductId" id="retailerProductId" class="retailerProductId"></input>
<span class="actualPrice"></span>
</div>
CSS：
.radioOptions
{
}
.divRadiobtns
{
float: left;
width: 20px;
}
a.radio-fx span, a.radio-fx
{
display: inline-block;
padding-bottom: 14px;
padding-top: 14px;
float: left;
}
.divRadiobtns .radio, .divRadiobtns .radio-checked, .divRadiobtns a.radio-fx
{
height: 18px;
padding-bottom: 14px;
padding-top: 14px;
width: 32px;
float: left;
}
.divRadiobtns .radio
{
background: url(https://where-to-buy.co/content/images/selector.png) no-repeat;
}
.divRadiobtns .radio-checked
{
background: url(https://where-to-buy.co/content/images/selectorhighlighted.png) no-repeat;
}
谢谢
