html - css 复选框比例在 os x 上不能很好地缩放

Question

我想创建一个视觉上更大的复选框。我在这里读到，唯一的方法是使用 CSS 变换比例:

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

问题是在 Windows、IE、FF 和 Chrome 浏览器上它看起来很完美，但在 OS X Yosemite 上它看起来比原始大小大 3 甚至 4 倍(已检查 Chrome 和 Safari)。

有人知道怎么解决吗？

完整示例: http://jsfiddle.net/dulmanr/g3h3z1pf/1/

Answer 1

尝试改变原生表单元素总是有点冒险。通常它会导致表单元素出现奇怪的行为，在本例中是 OSX 做了奇怪的事情。

当我需要让复选框和单选按钮看起来与原生元素不同时，我会完全替换它们。检查http://css-tricks.com/snippets/css/custom-checkboxes-and-radio-buttons/有关如何执行此操作的更多信息。有几次救了我。浏览器支持也不错。支持 IE9 及以上版本。