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时，表单元素通常是有问题的或无法设置样式。

只需通过此链接查看您自己的风格，更大尺寸的单选按钮..

另请看这个链接...

Bigger radio buttons

Answer 3

看到此链接可能是它的帮助

http://www.thecssninja.com/css/custom-inputs-using-css

Answer 4

您可以使用CSS，但浏览器和操作系统也会对此产生影响。请看下面的文章。

Styling radio buttons with CSS

Answer 5

试试这个：

<强> HTML

<label>
   <input type="radio" value="1">
   <div></div>
</label>

<强> CSS

input[type="radio"] {
   display: none;
}

input[type="radio"] + div {
   height: 20px;
   width: 20px;
   display: inline-block;
   cursor: pointer;
   vertical-align: middle;
   background: #FFF;
   border: 1px solid #d2d2d2;
   border-radius: 100%;
}

input[type="radio"] + div:hover {
    border-color: #c2c2c2;
}

input[type="radio"]:checked + div {
    background:gray;
}

DEMO：http://jsfiddle.net/nuzhysgg/

Answer 6

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

我过去曾使用this script，但最近才使用过。{/ p>

Answer 7

不要使用transform: scale(1.3)，它看起来确实很可怕。只需使用此：

input[type='radio'] {
    height: 15px
    width: 15px;
    vertical-align: middle;
}

...

<input type="radio">Select this item

Answer 8

CSS3转换比例模糊。设置高度和宽度不适用于FF（即使最新的66也不支持2020）。唯一的跨浏览器解决方案是自定义HTML标记+ CSS，不幸的是这不是最简单的方法。请参阅有用的教程custom radios & checkboxes。

单选按钮更大？

8 个答案: