增加单选按钮的大小

Question

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

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

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

change size of radio buttons

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

任何人都可以建议我一个有效的例子。感谢。

Answer 1

如果您不想更改比例，可以使用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;
}

Answer 2

这是一个非常基本的例子：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);
}

可生产

Answer 3

您可以使用CSS缩放功能。

h1 {
  zoom:200%
}

<h1><input type="radio"></h1>