如何制作一个通过单击选择选项的表单元素？答案

【问题标题】：How would I make a form element that selects an option by clicking?如何制作一个通过单击选择选项的表单元素？
【发布时间】：2013-04-06 10:48:03
【问题描述】：

我想要一个表单元素，例如下拉框或类似的东西，它可以一次显示所有项目，类似于单选按钮，但旁边没有圆圈。例如，这是我制作的我想要的快速图片

我已经知道如何制作 div 等等，我只需要知道如何点击它，它就会自动变成黄色并被“选中”。如果它可以是免费的 JS，那将有很大帮助。

【问题讨论】：

标签： css forms html radio-button

【解决方案1】：

如果不使用 javascript 或其他任何东西，您会受到一些限制，但您可以尝试 :target 伪类。看看这个 jsfiddle：http://jsfiddle.net/rkCSX/

【讨论】：

【解决方案2】：

您仍然可以使用单选按钮，但将它们包装到标签中并隐藏输入本身。这是example at jsFiddle。

HTML：

<label>
    <input type="radio" name="item">
    <img src="http://lorempixel.com/140/140/abstract">
    <div>Some text</div>
</label>

CSS：

label {
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}
div {
    background: cyan;
    line-height: 40px;
}
input[type=radio] {
    position: absolute;
    top: -100px;
}
input[type=radio]:checked ~ div {
    background: lime;
}

此外，您可能需要考虑目标浏览器 :checked 支持。例如 IE8 及以下不原生支持此选择器。

【讨论】：