输入[type = radio]：选中+带有background-position-y的标签在Firefox

Question

CSS选择器input[type=radio]:checked + label仅在Firefox中不起作用！

label {
  display: block;
  font-family: 'Muli';
  font-size: 14px;
  color: #666;
  vertical-align: top;
  background: url("https://s31.postimg.org/w3j8tei7f/bullet.png") no-repeat;
  background-size: 12px 52px;
  background-position-y: 1px;
  margin-bottom: 2px;
}
label:hover {
  cursor: pointer;
}
input[type=radio] + label {
  padding-left: 15px;
}
input[type=radio]:checked + label {
  background-position-y: -40px;
}

<div class="vol-radio">
  <input type="radio" name="volchoice-dates" id="volchoice-dates-flexibles" value="0" checked>
  <label for="volchoice-dates-flexibles">Dates flexibles</label>
  <input type="radio" name="volchoice-dates" id="volchoice-direct" value="1">
  <label for="volchoice-direct">Vol direct</label>
</div>

如何解决？

Answer 1

background-position-x和background-position-y为level 4 CSS

  

  
• 已解决：background-position-x/-y，background-repeat-x/-y       已获得backgrounds和borders等级4的批准。
  
• background-size-x/-y也进行了讨论，但没有得到多少       支持。
  

Firefox不支持（尚未，它将在FF版本50中），请参阅Can I Use

您可以改为使用background-position：

input[type=radio]:checked + label {
  background-position: 0 -40px; /* background-position-x | background-position-y  */
}

label {
  display: block;
  font-family: 'Muli';
  font-size: 14px;
  color: #666;
  vertical-align: top;
  background: url("https://s31.postimg.org/w3j8tei7f/bullet.png") no-repeat;
  background-size: 12px 52px;
  background-position: 0 1px;
  margin-bottom: 2px;
}
label:hover {
  cursor: pointer;
}
input[type=radio] + label {
  padding-left: 15px;
}
input[type=radio]:checked + label {
  background-position: 0 -40px;
}

<div class="vol-radio">
  <input type="radio" name="volchoice-dates" id="volchoice-dates-flexibles" value="0" checked>
  <label for="volchoice-dates-flexibles">Dates flexibles</label>
  <input type="radio" name="volchoice-dates" id="volchoice-direct" value="1">
  <label for="volchoice-direct">Vol direct</label>
</div>