我怎样才能风格单选按钮与图像
问题描述：
我想我的单选按钮的样式，以便他们使用未选中和选择的图像。我怎样才能风格单选按钮与图像
以下是我已经使用了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;
}
感谢
答
普遍接受的方式做，这是使用标签与 “为” 属性，它匹配的 “ID”相关的广播输入。
然后，您只需给出无线电输入位置：绝对和可视性隐藏，并将您想要的图像/文本等放在标签内。
<input type="radio" id="radio1" name="radio">
<label for="radio1"><img src=my-image.jpg></label>
为了使图像变化时，选择一个单选按钮被我修改你的提琴在这里：
您可以使用主要在小提琴也许设置图像作为标签背景或标签内的跨度，并在检查时更改背景，例如我正在使用示例中的背景颜色。
答
这个问题，有人问前：
- How do I style (css) radio buttons and labels?
- How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?
- Good HTML and CSS to use with <input type="radio">?
- CSS3 - Style radio inputs using the :checked selector on older browsers (ie7/ie8)
你会发现所有你需要知道的。
再看看＃1：
PS。互联网越来越令人伤心的是，它充斥着广告（垃圾），没有人关心旁边的内容。
好的我做了这个，但我需要在选中时添加一个不同的图像：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