ラジオボタンのスタイルを設定して、未選択および選択済みの画像を使用するようにします。
以下は私が使用した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;
}
ありがとう
