单选按钮更大？

Question

有没有办法用CSS制作一个更大的单选按钮？

如果没有,我还能怎么办？

Answer 1

试试这段代码:

input[type='radio'] { transform: scale(2); }

Answer 2

您可以轻松地设置它的高度和宽度,就像任何元素一样.

这是代码的小提琴

JSFIDDLE BIG RADIO BUTTON

HTML

<input id="r1" type="radio" name="group1" class="radio1" />
<label for="r1">label 1 text</label>
<input id="r2" type="radio" name="group1" class="radio2" />
<label for="r2">label 2 text</label>
<input id="r3" type="radio" name="group1" class="radio3" />
<label for="r3">label 3 text</label>
<input id="r4" type="radio" name="group1" class="radio4" />
<label for="r4">label 4 text</label>

CSS

input[type=radio] {
    display: none;
}
input[type=radio] + label::before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 0.5em;
}
input[type=radio]:checked + label::before {
    background-color: #ffa;
}

.radio1 + label::before {
    width: 0.5em;
    height: 0.5em;
}

.radio2 + label::before {
    width: 0.75em;
    height: 0.75em;
}

.radio3 + label::before {
    width: 1em;
    height: 1em;
}

.radio4 + label::before {
    width: 1.5em;
    height: 1.5em;
}

造型单选按钮并不容易.

一般来说,表单元素有问题或无法使用样式CSS alone.

只需通过此链接获取您自己的风格,更大尺寸的单选按钮..

另请看这个链接......

更大的单选按钮

Answer 3

无线电元素内部可能有一些奇怪的<span>技巧，但我想在不同的浏览器中使用它们会很烦人的调试。

我过去使用过这个脚本，但最近没有使用过。