Question

我必须遵循HTML：

<div>
  <input id="check" type="checkbox" />
  <label for="check"><span>Test label</span></label>
</div>

我想以某种方式设置复选框+标签的样式。为此，我使用

input[type=checkbox] {
  display: none;
}

删除复选框，然后添加一个自定义框：

input[type=checkbox] + label {
  position: absolute;
  border-radius: 2px;
  background-color: #baccdc;
  width: 21px;
  height: 21px;
  white-space: nowrap;
  padding-left: 21px;
  cursor: pointer;
}

所以，这在每个浏览器中都能正常工作。但是，我想改变:hover上的样式：

input[type=checkbox]:hover + label {
  background-color: green;
  display: block;
}

仅在我点击复选框后才能在Chrome中使用，然后在短时间内显示:hover样式。

在Firefox中，此样式始终显示在:hover。

Here is a JSFiddle

这是一个常见的Chrome问题还是我的CSS中的错误？

Answer 1

似乎display: none;的{{1}}状态存在问题。

这也是适用于Chrome的解决方法：

input

Fiddle

Answer 2

＆＃13;

input[type=checkbox] {
  display: none;
}

label span {
  display: block;
  margin-left: 5px;
}

input[type=checkbox] + label {
  position: absolute;
  border-radius: 2px;
  background-color: #baccdc;
  width: 21px;
  height: 21px;
  white-space: nowrap;
  padding-left: 21px;
  cursor: pointer;
}

input[type=checkbox] + label:hover {
  background-color: green;
  display: block;
}

input[type=checkbox]:checked + label {
  background-color: yellow;
  display: block;
}

＆＃13;

<div>
  <input id="check" type="checkbox" />
  <label for="check"><span>Test label</span></label>
</div>

＆＃13;

尝试将:hover效果放在label：

上

<div>
  <input id="check" type="checkbox"/>
  <label for="check"><span>Test label</span></label>
</div>

CSS：

input[type=checkbox] + label:hover
{
  background-color: green;
  display: block;
}

以下是相同

的 Demo

复选框：hover +标签不适用于Chrome 49,50

2 个答案: