使复选框更大（网站仅支持chrome）

Question

• 我正在处理网络应用程序
• Chrome是我唯一需要支持的浏览器
• 我正在尝试将复选框放大，如下图所示。
• 这可能吗？ HTML / Jquery / CSS是当前使用的语言。

谢谢

Answer 1

使用css3：

.checkbox{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}

或所有方框

input[type="checkbox"] {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
    }

仅限带有scaleBox类的复选框

input[type="checkbox"].scaleBox {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        transform: scale(1.1);
        }

在您的情况下

HTML：

<menu type=list>
    <li><label>Current</label><input type=checkbox></li>
    <li><label>My Goal</label><input type=checkbox class=scale></li>
</menu>

的CSS：

input[type="checkbox"]{

}
input[type="checkbox"].scale {
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    transform: scale(4);
}

menu{
    width:400px;
    margin:40px 0 0 0 ;
}

menu li{
    float:left;
    width:50%;
    list-style:none;
}

menu label{
    margin: 0 40px 0 0;
    text-transform:uppercase;
    font-weight:bolder;
}

更新演示：http://jsfiddle.net/kougiland/Fp9Dc/

，适用于Roger Johansson的跨浏览器Styled checkboxes

Answer 2

只需使用：

.youcheckbox{
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     transform: scale(1.1);
}