Question

我有一个仅使用CSS和图片构建的自定义复选框 - 没有Javascript。它已在许多浏览器上运行了数月：Chrome，Firefox，Windows上的IE和Safari，Chrome，Mac上的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

Answer 2

原来这是Chrome v39中的一个错误。有关详细信息，请参见此处：

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

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

自定义复选框在Windows上无法在Chrome中使用

2 个答案: