仅文本单选按钮 [英] Text only radio buttons

问题描述

我想拥有一系列单选按钮，因此没有单选按钮，只有标签和选定的按钮通过红色的圆形边框表示。这是模拟一个给定的纸张形式，其中一个值通过圈出一个数字表示。

I would like to have a series of radio buttons, whereby there are no radio buttons, only the labels and the selected "button" is indicated via a red, rounded border. This is to emulate a given paper form whereby a value is indicated by circling a single number.

这可能吗？

Is this possible?

推荐答案

不需要脚本。只是CSS。

No scripting needed. Just CSS.

下面是一个小提琴： JSFiddle

Here's a fiddle: JSFiddle

我不确切地知道你想要什么，但这至少是概念证明。

I don't know exactly what you want, but this is at least proof of concept.

CSS

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 $ b

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>

这篇关于仅文本单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！