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

• RESOLVED: background-position-x/-y, background-repeat-x/-y approved for level 4 of backgrounds and borders.
• background-size-x/-y was also discussed, but didn't garner much support.

---

它在 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>