我如何使用图像来devise单选button – 对于好的笑脸表示悲伤的笑脸是不好的？
我想创build一个用于用户反馈的HTML表单。 如果整体反馈良好，用户应该点击一个笑脸笑脸，如果整体反馈不好，用户应该select一个伤心的笑脸。
我认为这应该使用单选button来完成，而不是单选button。 也许我错了，但…
你知道我怎么能做到这一点？
谢谢！
让我们来简单说一下吧。 首先，使用纯HTML + CSS：
<div id="emotion"> <input type="radio" name="emotion" id="sad" /> <label for="sad"><img src="sad_image.png" alt="I'm sad" /></label> <input type="radio" name="emotion" id="happy" /> <label for="happy"><img src="happy_image.png" alt="I'm happy" /></label> </div> 如果没有JavaScript，这将很好地降级。 使用id和属性来连接标签和单选button，这样当select图像时，相应的单选button将被填充。 这很重要，因为我们需要使用JavaScript来隐藏实际的单选button。 现在对于一些jQuery的善良。 首先，创buildCSS我们需要：
.input_hidden { position: absolute; left: -9999px; } .selected { background-color: #ccc; } #emotion label { display: inline-block; cursor: pointer; } #emotion label img { padding: 3px; }
现在为JavaScript：
$('#emotion input:radio').addClass('input_hidden'); $('#emotion label').click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); });
我们不使用display: none的原因是display: none这里display: none可访问性的原因。 请参阅： http ： //www.jsfiddle.net/yijiang/Zgh24/1 ，了解更多的内容。
你可以利用CSS3做到这一点，通过CSS3规则隐藏按默认input单选button：
.class-selector input{ margin:0;padding:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
然后使用标签的图像作为以下演示：
JSFiddle演示1
JSFiddle演示2
要点 – 如何使用无线电button的图像
用纯html（没有JS），你真的不能用一个单选button来replace一个图像（至less我不认为你可以）。 你可以，虽然使用以下来build立与用户相同的连接：
<form action="" method="post"> <fieldset> <input type="radio" name="feeling" id="feelingSad" value="sad" /><label for="feelingSad"><img src="path/to/sad.png" /></label> <label for="feelingHappy"><input type="radio" name="feeling" id="feelingHappy" value="happy" /><img src="path/to/happy.png" /></label> </fieldset> </form>
这是一个纯粹的HTML + CSS解决scheme。
HTML：
<div class="image-radio"> <input type="radio" value="true" checked="checked" name="ice_cream" id="ice_cream_vanilla"> <label for="ice_cream_vanilla">Vanilla</label> <input type="radio" value="true" name="ice_cream" id="ice_cream_chocolate"> <label for="ice_cream_chocolate">Chocolate</label> </div>
SCSS：
// use an image instead of the native radio widget .image-radio { input[type=radio] { display: none; } input[type=radio] + label { background: asset-url('icons/choice-unchecked.svg') no-repeat left; padding-left: 2rem; } input[type=radio]:checked + label { background: asset-url('icons/choice-checked.svg') no-repeat left; } }
我编辑了以前的一篇文章。 现在，这是更简单，它完美的作品。
<input style="position: absolute;left:-9999px;" type="radio" name="emotion" id="sad" /> <label for="sad"><img src="red.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm sad" /></label> <input style="position: absolute;left:-9999px;" type="radio" name="emotion" id="happy" /> <label for="happy"><img src="blue.gif" style="display: inline-block;cursor: pointer;padding: 3px;" alt="I'm happy" /></label>
你不能像单选button，checkbox，滚动条（等）样式的东西。 这些是操作系统和浏览器原生的，而不是你可以操纵的东西。
你可以模拟这个，但是通过隐藏单选button而只显示一个图像。
<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>
使用jQuery。 保持您的checkbox元素隐藏，并创build一个像这样的列表：
<ul id="list"> <li><a href="javascript:void(0)" id="link1">Happy face</a></li> <li><a href="javascript:void(0)" id="link2">Sad face</a></li> </ul> <form action="file.php" method="post"> <!-- More code --> <input type="radio" id="option1" name="radio1" value="happy" style="display:none"/> <input type="radio" id="option2" name="radio1" value="sad" style="display:none"/> <!-- More code --> </form> <script type="text/javascript"> $("#list li a").click(function() { $('#list .active').removeClass("active"); var id = this.id; var newselect = id.replace('link', 'option'); $('#'+newselect).attr('checked', true); $(this).addClass("active").parent().addClass("active"); return false; }); </script>
这段代码会将checked属性添加到后台的广播input中，并为你的列表元素赋值active 。 当然，不要使用内联样式，不要忘记包含jQuery，并且在定制它之后，所有的东西都应该在框中运行。
干杯!
另一种select是使用表单replace脚本/库。 他们通常隐藏原始的元素，并用div或span来代替，你可以用任何你喜欢的方式来devise风格。
例子是：
http://customformelements.net （基于mootools） http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html
面对同样的问题，我创build了一个简单的jQuery插件http://xypaul.github.io/radioimg.js/
它使用隐藏的单选button和包含图像的标签，如下所示。
<input type="radio" style="display: none;" id="a" /> <label for="a"> <img class="" /> </label>
