3
我想我的單選按鈕的樣式，以便他們使用未選中和選擇的圖像。我怎樣才能風格單選按鈕與圖像
以下是我已經使用了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這樣會快樂用一個n jquery選項。
編輯
端起來解決它，如下所示：使用jQuery庫
http://jsfiddle.net/afnguyen/GSrZp/
：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;
}
感謝
好的我做了這個，但我需要在選中時添加一個不同的圖像：http://jsfiddle.net/afnguyen/mMr9e/2/ – anna 2013-02-12 16:53:35
我已經編輯了我的答案上面的更新，應該可以幫助你在那裏。 – 2013-02-12 16:58:57
感謝您抽出時間不是我所需要的，但讓我在路上 – anna 2013-02-12 21:52:06