增加单选按钮的大小答案

【问题标题】：Increase the size of radio buttons增加单选按钮的大小
【发布时间】：2014-07-03 16:21:00
【问题描述】：

如何增加单选按钮的大小？

我知道有很多这样的问题，我浏览了答案并尝试实施它们，但没有任何效果。

以下是我尝试过的一些链接。

change size of radio buttons

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

谁能给我推荐一个可行的例子。谢谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是一个非常基本的例子：http://jsfiddle.net/yrshaikh/uu47Z/

HTML

<form action="/html/codes/html_form_handler.cfm" method="get">
<input type="radio" name="preferred_color" value="Red" class="red" /> Red<br />
<input type="radio" name="preferred_color" value="Blue" /> Blue<br />
<input type="radio" name="preferred_color" value="Green" /> Green<br />
</form>

CSS

input[type=radio] {
    margin: 1em 1em 1em 0;
    transform: scale(3, 3);
    -moz-transform: scale(3, 3);
    -ms-transform: scale(3, 3);
    -webkit-transform: scale(3, 3);
    -o-transform: scale(3, 3);
}

生产

【讨论】：

+1 如果你想拥有相同的风格，这将是我的选择
如果你想避免 JS 干预，这是一个不错的选择，但是渲染很糟糕（至少在我的 mac/chrome 上），单选按钮非常像素化

【解决方案2】：

如果你不想改变比例，你可以使用 CSS 来创建自定义样式（以复选框为例）。这样做的好处是您不再局限于控件的特定于浏览器的外观和感觉。

Demo Fiddle

HTML

<input type='checkbox' />

CSS

input[type=checkbox]{
    position:relative;
    margin:5px;
}
input[type=checkbox]:before{
    position:absolute;
    height:30px;
    width:30px;
    top:-5px;
    left:-5px;
    border:2px solid grey;
    content:'';
    background:white;
    border-radius:100%;
}
input[type=checkbox]:after{
    position:absolute;
    display:none;
    height:15px;
    width:15px;
    top:5px;
    left:5px;
    content:'';
    background:grey;
    border-radius:100%;
}
input[type=checkbox]:checked:after{
    display:block;
}

【讨论】：

【解决方案3】：

您可以只使用 CSS 缩放功能。

h1 {
  zoom:200%
}

&lt;h1&gt;&lt;input type="radio"&gt;&lt;/h1&gt;

【讨论】：