html - 是否有一种与浏览器无关的方法可以在不更改 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>