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

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