不同的 Chrome 复选框样式答案

【问题标题】：Different Chrome checkbox styles不同的 Chrome 复选框样式
【发布时间】：2016-08-23 15:54:30
【问题描述】：

我为两个站点打开了相同版本的 Chrome 31，一个站点右侧有复选框，我在调试器中检查了样式，但似乎无法弄清楚是什么原因造成的。

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

这是具有较大 css width 和 height 的复选框：

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

【问题讨论】：

您是否检查了为每个站点加载了哪些框架、插件？在调试器中查看为每个站点加载了哪些脚本。也许其中一个正在更改其中一个站点的复选框
检查这个可能是 prettyCheckable ( prettyCheckable.js ) 或 prettyCheckable.css arthurgouveia.com/prettyCheckable
是哪个网站？我确定这样做是为了隐藏实际输入，而您只是看到一个看起来像输入的漂亮版本。在 prettyCheckable 上也是如此。
它是一个内部站点，实际上它是同一个站点，但第二个复选框的版本稍旧，所以有所改变，但我似乎无法弄清楚它是什么。我希望它是一个简单的替代 CSS 样式或其他东西。

【解决方案1】：

我想通了。另一个网站在 Chrome 中略微放大。翻转到备用渲染的 CSS 样式是...缩放。

zoom: 1.1

【讨论】：

显然除 === 1 之外的任何缩放都会触发浏览器的默认呈现。我正在使用 .9999 让 Chrome 正确呈现。我尝试了 1.0001，但它搞砸了 Safari。
对我来说，缩放样式在 Windows 上是不够的，我必须使用转换，如本文中所述 bugs.chromium.org/p/chromium/issues/detail?id=111406 。

【解决方案2】：

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

1 sn-p 的 css 轻松更改所有复选框，这是我的目标。

没有花太多时间在风格上，但你明白了要点。

【讨论】：

【解决方案3】：

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

以下代码会将单选框和复选框缩放为 50px x 50px 大复选框。

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

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

【讨论】：

【解决方案4】：

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

【讨论】：