使用图像，而不是单选button
如果我有一个收音机组button：
…我怎样才能显示在select选项而不是button的图像，例如
http://jsbin.com/image-instead-of-radio-button/5/
- 将收音机和图像放在
<label> - 隐藏单选button
- 使用相邻的兄弟select器
+将目标定位在隐藏的收音机旁边
<label> <input type="radio" name="fb" value="small" /> <img src="fb1.jpg"> </label>
CSS：
label > input{ /* HIDE RADIO */ visibility: hidden; /* Makes input not-clickable */ position: absolute; /* Remove input from document flow */ } label > input + img{ /* IMAGE STYLES */ cursor:pointer; border:2px solid transparent; } label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */ border:2px solid #f00; }
不要忘记添加一个类到你的标签，在CSS中使用这个类 。
自定义样式和animation
这是使用<i>元素和:after伪的高级版本：
body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES http://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ visibility: hidden; position: absolute; } /* RADIO & CHECKBOX STYLES */ .rad > i, .ckb > i{ /* DEFAULT <i> STYLE */ display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } /* CHECKBOX OVERWRITE STYLES */ .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i:after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:checked + i:after{ /* (RADIO CHECKED) <i> STYLE */ margin-left: 11px; background: orange; }
<label class="rad"> <input type="radio" name="r1" value="a" /> <i></i> Radio 1 </label> <label class="rad"> <input type="radio" name="r1" value="b" /> <i></i> Radio 2 </label> <br> <label class="ckb"> <input type="checkbox" value="a" /> <i></i> Checkbox 1 </label> <label class="ckb"> <input type="checkbox" value="b" /> <i></i> Checkbox 2 </label>
例：
小心！ 这个解决scheme是纯CSS的。
我build议你利用CSS3做到这一点，通过CSS3规则隐藏默认的input单选button：
.options input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
我只是前几天做一个例子。
- 的jsfiddle
- 如何使用无线电button的图像 – Gist
你可以使用CSS。
HTML（仅用于演示，可定制）
<div class="button"> <input type="radio" name="a" value="a" id="a" /> <label for="a">a</label> </div> <div class="button"> <input type="radio" name="a" value="b" id="b" /> <label for="b">b</label> </div> <div class="button"> <input type="radio" name="a" value="c" id="c" /> <label for="c">c</label> </div> ...
CSS
input[type="radio"] { display: none; } input[type="radio"]:checked + label { border: 1px solid red; }
的jsfiddle
保持单选button隐藏，单击图像时，使用JavaScriptselect它们，并设置图像的样式，使其看起来像选中。 这是标记 –
<div id="radio-button-wrapper"> <span class="image-radio"> <input name="any-name" style="display:none" type="radio"/> <img src="..."> </span> <span class="image-radio"> <input name="any-name" style="display:none" type="radio"/> <img src="..."> </span> </div>
和JS
$(".image-radio img").click(function(){ $(this).prev().attr('checked',true); })
CSS
span.image-radio input[type="radio"]:checked + img{ border:1px solid red; }
这里是一个基于这个例子的简单的jQuery UI解决scheme：
http://jqueryui.com/button/#radio
修改代码：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Button - Radios</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#radio" ).buttonset(); }); </script> </head> <body> <form> <div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1"><img src="image1.gif" /></label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2"><img src="image2.gif" /></label> <input type="radio" id="radio3" name="radio"><label for="radio3"><img src="image3.gif" /></label> </div> </form> </body> </html>
jQueryUI照顾的图像背景，所以你知道哪个button被选中。
注意：如果你想设置一个button来检查或不选中通过JavaScript，你必须调用刷新function：
$('#radio3').prop('checked', true).button("refresh");
这里是非常简单的例子
HTML
<div> <input type="radio" id="shipadd1" value=1 name="address" /> <label for="shipadd1"></label> value 1 </div> <div> <input type="radio" id="shipadd2" value=2 name="address" /> <label for="shipadd2"></label> value 2 </div>
CSS
input[type="radio"]{ display:none; } input[type="radio"] + label { background-image:url(cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png); height: 300px; width: 300px; display:inline-block; padding: 0 0 0 0px; cursor:pointer; } input[type="radio"]:checked + label { background-image:url(cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png); }
演示： http : //jsfiddle.net/La8wQ/2471/
这个例子基于这个技巧： https ： //css-tricks.com/the-checkbox-hack/
我testing了它：铬，火狐，safari
下面是biggg字体的截图（由于我很快find了大的单选button图像）
