是否有一种浏览器无关的方法来增加复选框的大小而不更改HTML标记？

Question

是否有浏览器无关的方法来增加<input type="checkbox">大小而不更改HTML标记？

我尝试在CSS中更改高度和宽度但问题是在Firefox中复选框变得像素化.在Opera中,只有输入的逻辑大小增加,而不是视觉.

我应该使用<label> and :before伪选择器使它看起来漂亮和大,有哪些替代解决方案？

尽可能避免使用JavaScript.

Answer 1

您的假设是正确的,跨浏览器支持是不一致的.如果您想要防弹定制,您将需要编写自己的解决方案.

就个人而言,我会看一下主要css框架(如Bootstrap和Foundation)使用的解决方案.

从其中一个链接:

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

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
    Click Me
</label>

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

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.cr-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cr-icon:before {
    content: "\2713";  
}

<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon"></i></span>
    Click Me
</label>