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

Question

我有一个仅使用 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");
}

Answer 1

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

它在哪里:

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

它必须变成

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