如何创建一个通过单击选择选项的表单元素？

Question

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

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

Answer 1

您仍然可以使用radiobuttons，但将它们包装到标签中并隐藏输入本身。这是一个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;
}

此外，您可能需要考虑目标浏览器：已检查支持。例如，IE8及以下版本不支持此选择器。

Answer 2

你没有使用javascript或其他任何东西，但你可以试试:target伪类。看看这个jsfiddle：http://jsfiddle.net/rkCSX/