如何用图像设置单选按钮的样式 - 笑的好笑，悲伤的笑脸好坏？

Question

我想创建一个HTML表单供用户反馈。 如果整体反馈良好，用户应点击笑笑，如果整体反馈不好，用户应选择悲伤的笑脸。

我认为应该使用单选按钮来完成，使用表情符号而不是单选按钮。也许我错了......

你知道我怎么做到这一点吗？

谢谢！

Answer 1

让我们保持简单，我们。首先，使用纯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和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;
}

现在为JavaScript：

$('#emotion input:radio').addClass('input_hidden');
$('#emotion label').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
});

我们之前未使用display: none的原因是出于可访问性原因。请参阅：http://www.jsfiddle.net/yijiang/Zgh24/1了解更多精彩内容的实时演示。

Answer 2

您可以利用CSS3来实现这一点，方法是使用CSS3规则隐藏默认输入单选按钮：

.class-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

然后使用图像标签作为以下演示：

JSFiddle Demo 1

JSFiddle Demo 2

Gist - How to use images for radio-buttons

Answer 3

使用纯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>

Answer 4

我已经编辑过上一篇文章。现在，它更简单，效果更好。

<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>

Answer 5

您根本无法设置单选按钮，复选框，滚动条（等）等内容。这些是操作系统和浏览器的原生，而不是你可以操作的东西。

您可以通过隐藏单选按钮并仅显示图像来模拟此情况。

<input type="radio" style="display: none;" id="sad" /><label for="sad"><img class="sad_image" /></label>

Answer 6

使用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>

此代码会将已检查属性添加到后台的无线电输入，并将类有效分配给列表元素。当然不要使用内联样式，不要忘记包含jQuery，并且在自定义之后一切都应该是开箱即用的。

干杯！

Answer 7

另一种方法是使用表单替换脚本/库。 它们通常隐藏原始元素并用div或span替换它们，您可以按照自己喜欢的方式设置它。

例如：

http://customformelements.net（基于mootools） http://www.htmldrive.net/items/show/481/jQuery-UI-Radiobutton-und-Checkbox-Replacement.html

Answer 8

面对同样的问题，我创建了一个简单的jQuery插件http://xypaul.github.io/radioimg.js/

它使用隐藏的单选按钮和包含图像的标签，如下所示。

<input type="radio" style="display: none;" id="a" />
<label for="a">
   <img class="" />
</label>

Answer 9

可以使用标签和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>

应隐藏单选按钮，

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

图像可以在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');
}

要在单击单选按钮时更改图像，请将选中状态添加到输入标记

.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');
}

如果您有任何疑问，请参阅以下链接，因为我已从以下博客中获得解决方案， http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html