checkbox:hover + label doesn't work in Chrome 49,50

Question

I have to following HTML:

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

I want to style a checkbox + label certain way. To do that, I use

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

to remove the checkbox, and then add a own custom box with:

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

So, this works fine in every browser. Now, however, I want to change the style on :hover like this:

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

This works in Chrome just after I clicked on the checkbox, and then, for a short amount of time, the :hover style appears.

In Firefox, this style always appears on :hover.

Here is a JSFiddle.

Is it a common Chrome problem or a mistake in my CSS?

Answer 1

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;
}

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

Try putting the :hover effect on the 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;
}

Here is a Demo for the same

Answer 2

It seems to have an issue with the display: none; state of the input.

Here's a workaround that works fine in Chrome too :

#groupInput label:hover  {
  background-color: green;
  display: block;
}

Fiddle