使用 webkit 转换比例增加 Safari 中复选框的大小答案

【问题标题】：Increasing size of checkbox in Safari with webkit transform scale使用 webkit 转换比例增加 Safari 中复选框的大小
【发布时间】：2014-04-26 14:36:44
【问题描述】：

我的目标是增加复选框的大小，跨浏览器。我在 Internet Explorer、Firefox 和 Chrome 中通过使用浏览器前缀（-moz-、-ms- 等）实现了这个目标：

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2.1, 2.1); /* IE */
  -moz-transform: scale(2.1, 2.1); /* FF */
  -webkit-transform: scale(2.1, 2.1); /* Safari and Chrome */
  -o-transform: scale(2.1, 2.1); /* Opera */
}

它不适用于 Safari（和 Opera，但我更专注于 Safari）。我有 5.7.1 版，我正在从 Windows 桌面访问它。

但是，我在玩这个 jsfiddle 并注意到比例适用于 div： http://jsfiddle.net/webvitaly/KKVXB/

我删除了代码以获得仍然可以获得所需结果的最小值：

<div class="matrix3d"></div>
<input type="checkbox" name="opt1" id="option1" />

input[type=checkbox] {
    -webkit-transform: scale(3,3); /* safari and chrome */   
}
.matrix3d {
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}

这是它的 jsfiddle：http://jsfiddle.net/3xr7Q/

复选框比预期的要大，但只要我取出“matrix3d”类或以任何方式更改“matrix3d”html 或 css，复选框就会恢复正常大小。

有谁知道为什么它可以与“matrix3d”类一起使用，以及没有它我如何实现目标，最好不编辑 HTML？我不想在我的复选框旁边添加一个额外的 'matrix3d' div，因为我不知道它为什么会影响复选框。

编辑：另外，我注意到如果我刷新页面，它会在回到小尺寸之前闪烁到大尺寸。此外，在 Windows 上也可以搞定，但如果有人说它可以在 Mac 或 iphone 上运行，那可能没问题。

【问题讨论】：

标签： html css safari webkit scale

【解决方案1】：

输入元素是内联元素而不是块级元素，webkit 历来不支持对内联元素进行转换。

解决此问题的一种方法是在输入的 CSS 中添加 display: inline-block。我现在不是 Mac，所以无法检查。

【讨论】：