Html 单选按钮背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11256992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Radio button background image
提问by Sowmya
I have given bg image for radio button. It is working in chrome but not in mozilla.
我已经为单选按钮提供了 bg 图像。它适用于 chrome，但不适用于 mozilla。
Here is my code
这是我的代码
<div class="fieldlist">
<label for="shipadd2">
<input type="radio" id="shipadd2" name="address" />
<div class="compacttext"> Lorem ipsum </div>
</label>
</div>
CSS is
CSS 是
.fieldlist input[type="radio"] {
float: right;
-webkit-appearance: none;
border: none;
width: 25px;
height: 25px;
background: url(images/radio.png) left center no-repeat;
background-size: 20px;
}
.fieldlist input[type="radio"]:checked {
background: url(images/radio_checked.png) left center no-repeat;
}
回答by sandeep
Write like this:
像这样写：
CSS:
CSS：
input[type="radio"]{
display:none;
}
input[type="radio"] + label
{
background: #999;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type="radio"]:checked + label
{
background: #0080FF;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
HTML
HTML
<input type="radio" id="shipadd2" name="address" />
<label for="shipadd2"></label>
Read this article for more http://css-tricks.com/the-checkbox-hack/
阅读这篇文章了解更多http://css-tricks.com/the-checkbox-hack/
回答by SVS
Do you want something like this http://jsfiddle.net/surendraVsingh/UmpdH/5/(click on the bell icon)
你想要这样的东西吗http://jsfiddle.net/surendraVsingh/UmpdH/5/（点击铃铛图标）
CSS
CSS
label{
display:block;
background: url(https://dl.dropbox.com/u/19982181/fab/notify.png) no-repeat;
}
.fieldlist input[type="radio"] {
float: right;
border: none;
opacity:0;
width: 25px;
height: 25px;
display:block;
float:left;
border:1px solid #333;
background-size: 20px;
}
Jquery:
查询：
$("#shipadd2").click(function(){
if($(this).is(":checked")){
$(this).parent().css('background-position', '0 -29px');
}
else{
$(this).parent().css('background-position', '0 0');
}
});?
?
?
回答by RAVI singh
Try this it worked for me
试试这个它对我有用
-moz-appearance: none;Thanks
谢谢
