我如何设计带有图像的单选按钮 - 笑脸好笑，悲伤笑脸坏? [英] How do I style radio buttons with images - laughing smiley for good, sad smiley for bad?

问题描述

我想为用户反馈创建一个 HTML 表单.如果总体反馈好，用户应该点击一个笑脸，如果总体反馈不好，用户应该选择一个悲伤的笑脸.

我认为这应该使用单选按钮来完成，用笑脸代替单选按钮.也许我错了...

你知道我是如何做到这一点的吗?

谢谢！

解决方案

让我们保持简单，好吗?首先，使用纯 HTML + CSS:

<input type="radio" name="emotion" id="sad"/><label for="sad"><img src="sad_image.png" alt="我很伤心"/></label><input type="radio" name="emotion" id="happy"/><label for="happy"><img src="happy_image.png" alt="我很开心"/></label>

如果没有 JavaScript，这会很好地降级.使用id 和for 属性链接标签和radiobutton，这样当图片被选中时，对应的radiobutton 会被填充.这很重要，因为我们需要使用 JavaScript 隐藏实际的单选按钮.现在来看看 jQuery 的优点.首先，创建我们需要的 CSS:

.input_hidden {位置:绝对；左:-9999px；}.selected {背景颜色:#ccc；}#情感标签{显示:内联块；光标:指针；}#情感标签 img {填充: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现场演示，有更多花哨的东西.

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?

Thanks!

解决方案

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>

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

Now for the 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: none here is for accessibility reasons. See: http://www.jsfiddle.net/yijiang/Zgh24/1 for a live demo, with something more fancy.

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