自定义复选框在 Windows 上的 Chrome 中不起作用答案

【问题标题】：Custom Checkbox Not Working in Chrome on Windows自定义复选框在 Windows 上的 Chrome 中不起作用
【发布时间】：2015-01-21 15:29:31
【问题描述】：

我有一个仅使用 CSS 和图像构建的自定义复选框——没有 Javascript。它已经在许多浏览器上运行了几个月：Windows 上的 Chrome、Firefox、IE 和 Mac 上的 Safari、Chrome、Firefox。

最近，Windows 上的 Chrome 停止工作。当您单击复选框时，没有任何反应。

我认为有问题的 Chrome 版本是：39.0.2171.65 m

Plnkr 在这里演示了这个问题：http://plnkr.co/edit/zUhrCJcLzeFxjkfFJfio?p=preview

有什么想法或解决方法吗？

HTML：

<div>
  <input id="cb1" type="checkbox">
  <label for="cb1">I am a checkbox.</label>
</div>

CSS：

input[type=checkbox]:not(old),
input[type=radio]:not(old) {
  position: absolute;
  width: 28px;
  height: 20px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

input[type=checkbox]:not(old) + label,
input[type=radio]:not(old) + label {
  color: #8a8a8a;
  font-size: 18px;
  font-weight: 200;
  padding-left: 28px;
  background-image: url("https://lh6.googleusercontent.com/-nUA70hCTkQg/VHJw1D_AMQI/AAAAAAAAAtM/H2hV7zay0ZY/w34-h36-no/radio-unchecked.png");
  background-repeat: no-repeat;
  line-height: 18px;
}

input[type=checkbox]:not(old):checked + label,
input[type=radio]:not(old):checked + label {
  background-image: url("https://lh3.googleusercontent.com/-Ej9nmrhevVg/VHJw1AxHuAI/AAAAAAAAAtI/UfonPHsJBMc/w34-h36-no/radio-checked.png");
}

【问题讨论】：

什么是 :not(old) ???
:not 是用于否定的 css 伪类。我用它来隐藏不完全支持 CSS3 选择器的旧浏览器的样式。此处说明：code.stephenmorley.org/html-and-css/…
我知道，但对使用旧的感到困惑。这应该很奇怪吧？？
这里解释一下我是如何使用它的：code.stephenmorley.org/html-and-css/…

标签： css google-chrome checkbox

【解决方案1】：

我刚刚遇到了完全相同的问题。通过反转css中伪类的顺序来解决

它在哪里：

input[type=radio]:not(old):checked + label

它必须变成

input[type=radio]:checked:not(old) + label

【讨论】：

感谢@RaianaLadeira。奇怪的是它工作正常，只是在 Chrome v39 中停止工作。同样奇怪的是它仍然可以在其他浏览器中使用。

【解决方案2】：

原来这是 Chrome v39 中的一个错误。详情请看这里：

https://code.google.com/p/chromium/issues/detail?id=435923

您可以等待下一个 Chrome 版本，或使用@RaianaLadeira 的建议。

【讨论】：