仅文字单选按钮

时间:2013-08-10 21:49:12

标签: html css

我想有一系列单选按钮,没有单选按钮,只有标签和选中的“按钮”通过红色圆角边框指示。这是为了模拟给定的纸张形式,其中通过圈出单个数字来指示值。

这可能吗?

1 个答案:

答案 0 :(得分:8)

无需编写脚本。只是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>