input[type=radio]:checked + label with 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>