纯文本单选按钮

Question

我希望有一系列的单选按钮，不需要实际的圆形按钮，只需要标签，并通过红色圆角边框来指示所选“按钮”。这是为了模拟某个纸质表格，其中一个值是通过圈出单个数字来表示的。这种形式是否可能实现？

- Drakekin

---

是的，但你可能需要一些 JavaScript。 - dezman

JavaScript非常适合。我已经在使用它来预先计算一些基于之前用户数据的值。 - Drakekin

我的意思是我不会为你编写代码，如果你有一个 jsFiddle，我可以看一下。 - dezman

我稍微调整了我的版本。 - user2625787

@watson，我可能应该更清楚地表达我的意思，我只是在寻找正确方向的指针。 - Drakekin

@Drakekin 很酷，抱歉，我今天心情不好 :( - dezman

Answer 1

不需要编写脚本，只需使用CSS。

这里有一个示例：JSFiddle

我不知道你具体想要什么，但至少这是一个概念验证。

CSS

label {
    display: inline-block;
    width: 100px;
    height: 50px;
    border: solid 2px red;
}
input[type="radio"] {
    display:none;   
}
input[type="radio"]:checked + label {
    border: solid 2px green;
}

HTML

<input type="radio" id="test" name="jeff"><label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff"><label for="test2">Steak</label>

- user2625787

---

只是提供给那些像我一样遇到这个问题的人一个信息，现在这些小提琴链接已经无法使用了，但代码仍然可以正常工作。 - canadiancreed