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

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演示1

JSFiddle演示2

要点 - 如何将图像用于单选按钮

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>