本文介绍了仅文本单选按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想拥有一系列单选按钮,因此没有单选按钮,只有标签和选定的按钮通过红色的圆形边框表示。这是模拟一个给定的纸张形式,其中一个值通过圈出一个数字表示。
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
I don't know exactly what you want, but this is at least proof of concept.
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;
}
<input type="radio" id="test" name="jeff"><label for="test">Pizza</label>
<input type="radio" id="test2" name="jeff"><label for="test2">Steak</label>
这篇关于仅文本单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!