Html 我如何设计带有图像的单选按钮 - 笑笑是好的，悲伤的笑是坏的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3896156/
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
How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?
提问by learning-html
I would like to create an HTML form for user feedback. If the overall feedback is good, the user should click on a laughing smiley, if the overall feedback is bad, the user should choose a sad smiley.
我想为用户反馈创建一个 HTML 表单。如果总体反馈好，用户应该点击一个笑脸，如果总体反馈不好，用户应该选择一个悲伤的笑脸。
I think this should be done using radio buttons, with the smileys instead of the radio buttons. Maybe I'm wrong though...
我认为这应该使用单选按钮来完成，用笑脸代替单选按钮。不过也许我错了...
Do you know how I can achieve this?
你知道我怎么能做到这一点吗？
Thanks!
谢谢！
回答by Yi Jiang
Let's keep them simple, shall we. First off, using pure HTML + CSS:
让我们保持简单，好吗？首先，使用纯 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>
This will degrade nicely if there's no JavaScript. Use idand forattributes to link up the label and radiobutton so that when the image is selected, the corresponding radiobutton will be filled. This is important because we'll need to hide the actual radiobutton using JavaScript. Now for some jQuery goodness. First off, creating the CSS we'll need:
如果没有 JavaScript，这将很好地降级。使用id和for属性链接标签和单选按钮，以便在选择图像时填充相应的单选按钮。这很重要，因为我们需要使用 JavaScript 隐藏实际的单选按钮。现在来看看 jQuery 的优点。首先，创建我们需要的 CSS：
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #ccc;
}
#emotion label {
display: inline-block;
cursor: pointer;
}
#emotion label img {
padding: 3px;
}
Now for the JavaScript:
现在对于 JavaScript：
$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
The reason why we're not using display: nonehere is for accessibility reasons. See: http://www.jsfiddle.net/yijiang/Zgh24/1for a live demo, with something more fancy.
我们不在display: none这里使用的原因是出于可访问性的原因。请参阅：http: //www.jsfiddle.net/yijiang/Zgh24/1的现场演示，还有更多花哨的东西。
回答by Richard Cotrina
You can take advantage of CSS3 to do that, by hidding the by-defaultinput radio button with CSS3 rules:
您可以利用 CSS3 来做到这一点，通过使用 CSS3 规则隐藏默认输入单选按钮：
.class-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
And then using labels for images as the following demos:
然后使用图像标签作为以下演示：
JSFiddle Demo 1
JSFiddle 演示 1
JSFiddle Demo 2
JSFiddle 演示 2
Gist - How to use images for radio-buttons
要点 - 如何将图像用于单选按钮
回答by AlexChaffee
Here's a pure HTML+CSS solution.
这是一个纯 HTML+CSS 解决方案。
HTML:
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;
}
}
回答by David says reinstate Monica
With pure html (no JS), you can't really substitute a radio-button for an image (at least, I don't think you can). You could, though use the following to make the same connection to the user:
使用纯 html（无 JS），您不能真正用单选按钮代替图像（至少，我认为您不能）。不过，您可以使用以下内容与用户建立相同的连接：
<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>
回答by Can
I have edited one of the previous post. Now, it is way more simple and it works perfectly.
我已经编辑了之前的一篇文章。现在，它更简单了，而且效果很好。
<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>
回答by Paul
Faced with the same problem I created a simple jQuery plugin http://xypaul.github.io/radioimg.js/
面对同样的问题，我创建了一个简单的 jQuery 插件http://xypaul.github.io/radioimg.js/
It works using hidden radio buttons and labels containing images as shown below.
它使用隐藏的单选按钮和包含图像的标签工作，如下所示。
<input type="radio" style="display: none;" id="a" />
<label for="a">
<img class="" />
</label>
回答by Makibo
another alternative is to use a form replacement script/library. They usually hide the original element and replace them with a div or span, which you can style in whatever way you like.
另一种选择是使用表单替换脚本/库。它们通常隐藏原始元素并用 div 或 span 替换它们，您可以按照自己喜欢的任何方式设置样式。
Examples are:
例子是：
http://customformelements.net(based on mootools) http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html
http://customformelements.net（基于 mootools） http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html
回答by Explosion Pills
You cannot style things like radio buttons, checkboxes, scrollsbars (etc.) at all. These are native to the OS and the browser and not something you can manipulate.
您根本无法设置单选按钮、复选框、滚动条（等）之类的样式。这些是操作系统和浏览器的本机，而不是您可以操作的。
You can simulate this, however by hiding the radio buttons and only showing an image instead as in.
您可以通过隐藏单选按钮并仅显示图像来模拟这一点。
<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>
回答by Claudiu
Use jQuery. Keep your checkbox elements hidden and create a list like this:
使用 jQuery。保持你的复选框元素隐藏并创建一个这样的列表：
<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>
This code would add the checkedattribute to your radio inputs in the background and assign class activeto your list elements. Do not use inline styles of course, don't forget to include jQuery and everything should run out of the box after you customize it.
此代码将在后台将选中的属性添加到您的无线电输入中，并将类active分配给您的列表元素。当然不要使用内联样式，不要忘记包含 jQuery，并且在您自定义之后，一切都应该是开箱即用的。
Cheers!
干杯!
回答by Beginner
Images can be placed in place of radio buttons by using label and span elements.
可以使用 label 和 span 元素放置图像来代替单选按钮。
<div class="customize-radio">
<label>Favourite Smiley</label>
<br>
<label for="hahaha">
<input type="radio" name="smiley" id="hahaha">
<span class="haha-img"></span>
HAHAHA
</label>
<label for="kiss">
<input type="radio" name="smiley" id="kiss">
<span class="kiss-img"></span>
Kiss
</label>
<label for="tongueOut">
<input type="radio" name="smiley" id="tongueOut">
<span class="tongueout-img"></span>
TongueOut
</label>
</div>
Radio button should be hidden,
单选按钮应该隐藏，
.customize-radio label > input[type = 'radio'] {
visibility: hidden;
position: absolute;
}
Image can be given in the span tag,
图像可以在 span 标签中给出，
.customize-radio label > input[type = 'radio'] ~ span{
cursor: pointer;
width: 27px;
height: 24px;
display: inline-block;
background-size: 27px 24px;
background-repeat: no-repeat;
}
.haha-img {
background-image: url('hahabefore.png');
}
.kiss-img{
background-image: url('kissbefore.png');
}
.tongueout-img{
background-image: url('tongueoutbefore.png');
}
To change the image on click of radio button, add checked state to the input tag,
要在单击单选按钮时更改图像，请将选中状态添加到输入标签，
.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
background-image: url('tongueout.png');
}
If you have any queries, Refer to the following link, As I have taken solution from the below blog, http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html
如果您有任何疑问，请参阅以下链接，因为我从以下博客中采取了解决方案， http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html
