不同的Chrome复选框样式

Question

我为两个网站打开了相同版本的Chrome 31，一个网站右侧有复选框，我检查了调试器中的样式，但我似乎无法弄清楚导致它的原因。

它必须是自定义的Chrome样式，因为它只使用标准的<input type="checkbox" />

这是一个包含较大css width和height的复选框：

两个网站都使用<input type="checkbox">

Answer 1

我明白了。另一个网站在Chrome中略有缩放。翻转到备用渲染的CSS样式是......缩放。

zoom: 1.1

Answer 2

我制作了一个不需要使用<label>标签的版本：

http://jsfiddle.net/4bs8A/

1段css改变了所有复选框，没有什么麻烦，这是我的目标。

没有花很长时间在风格上，但你得到了要点。

Answer 3

似乎最新的Chrome和IE，与Firefox形成对比，能够将复选框和单选按钮缩放到所需的宽度和高度。

以下代码会将无线电和复选框缩放为50px x 50px大的复选框。

input[type=radio], input[type=checkbox] {
    height: 50px; width: 50px;
}

请比较不同浏览器的外观： https://jsfiddle.net/t9q0mny2/

Answer 4

第一个复选框是默认，第二个复选框是自定义。每个浏览器以自己的方式绘制的标准复选框。自定义复选框使用JS + CSS for IE8及其早期或仅使用CSS :before和:after更改其外观。  DEMO使用明确的CSS