如何让单选按钮变大？

Question

有没有用CSS将单选按钮变大的方法？

如果没有，有什么其他方法可以做到？

- Latox

---

请查看此链接，它可能会对您有所帮助：http://www.thecssninja.com/css/custom-inputs-using-css - Bhanu Prakash Pandey

你在这里究竟想要实现什么？也许有另一种解决方案……比如使用图像模拟单选按钮。 - Starx

https://dev59.com/cmsz5IYBdhLWcg3wsZ8N - Christophe Roussy

@ChristopheRoussy提供的链接与这个问题无关。这里要求更大的单选按钮（解决方法是改变input元素的样式），而在您提供的链接中，OP提出了更大的“可点击”区域（解决方法是改变label的样式）。 相反，在此处，有回答适用于在此问题中提出的OP的问题的答案。 最快的答案（(c) imanabidi）--“设置宽度和高度，使用em度量单位，例如：width: 1.2em; height: 1.2em”。 - trejder

https://dev59.com/kG445IYBdhLWcg3wUote - GlennG

Answer 1

试试这段代码：

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

- Manish Patel

---

单选按钮使用“transform”比使用“width”和“height”更美观，而且比其他解决方案更简单。 - Jose Manuel Abarca Rodríguez

对我来说，实际上看起来并不那么糟糕。我在IE 11、Chrome和FF上进行了测试，它们看起来很好。谢谢！ - relipse

Answer 2

您可以像其他元素一样轻松设置其高度和宽度。

这是带有代码的fiddle

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

- KesaVan

---

这很聪明，我喜欢它！对我有用。谢谢！ - LukeP

@LukeP：欢迎随时光临 :) - KesaVan

有没有办法避免影响用户体验？显然，这在键盘上不起作用。 - wtf8_decode

Answer 3

不要使用transform: scale(1.3)，这样看起来非常糟糕。只需使用此代码：

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

<input type="radio">Select this item

- Paul Kruger

Answer 4

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

《使用CSS样式化单选按钮》（Styling radio buttons with CSS）

- Naveed

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;
}

演示： http://jsfiddle.net/nuzhysgg/

- Cas Bloem

---

标签（内联元素）不能包含DIV（块级元素）- https://dev59.com/GWMl5IYBdhLWcg3wMUiP - GlennG

Answer 6

在单选框元素内可能会有一些古怪的<span>技巧，但我想在不同的浏览器中使用它们将很烦人。

我过去曾经使用this script，但最近没有使用过。

- Cole

Answer 7

CSS3变换缩放会模糊。在FF中设置高度和宽度无效（即使最新的66版本也不支持，2020年）。唯一的跨浏览器解决方案是使用自定义HTML标记+CSS，但这并不是最简单的方法。请参阅有用的教程自定义单选框和复选框。

- lubosdz