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

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

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

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

尽可能避免使用JavaScript.

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

就个人而言,我会看一下主要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;
}

    
    
    Click Me