Question

我的目标是增加复选框的大小，跨浏览器。我已经在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，那可能没问题。

Answer 1

输入元素是内联而不是块级元素，并且webkit历来不支持内联元素的转换。

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

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

1 个答案: