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

Question

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

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

Answer 1

您仍然可以使用单选按钮，但将它们包装到标签中并隐藏输入本身。这是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 及以下不支持此选择器。

Answer 2

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