如何用图像来形成单选按钮 - 笑的笑脸好，悲伤的笑脸坏？ [英] How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

问题描述

我想为用户反馈创建一个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.

我认为这应该使用单选按钮，与表情而不是单选按钮。也许我错了，但是...

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?

谢谢！

推荐答案

让我们保持简单，我们。首先，使用纯HTML + CSS：

Let's keep them simple, shall we. First off, using pure 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 和为属性链接标签和单选按钮，以便选择图像时，相应的单选按钮填充。这很重要，因为我们需要使用JavaScript隐藏实际的单选按钮。现在对于一些jQuery goodness。首先，创建我们需要的CSS：

This will degrade nicely if there's no JavaScript. Use id and for attributes 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:

.input_hidden {
    position: absolute;
    left: -9999px;
}

.selected {
    background-color: #ccc;
}

#emotion label {
    display: inline-block;
    cursor: pointer;
}

#emotion label img {
    padding: 3px;
}

现在为JavaScript：

Now for the 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 进行现场演示，更花哨。

The reason why we're not using display: none here is for accessibility reasons. See: http://www.jsfiddle.net/yijiang/Zgh24/1 for a live demo, with something more fancy.

这篇关于如何用图像来形成单选按钮 - 笑的笑脸好，悲伤的笑脸坏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！