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是4級CSS

• 已解決： background-position-x/-y ， background-repeat-x/-y已批准用於backgrounds和borders第4級。
• 還討論了background-size-x/-y ，但沒有獲得太多支持。

---

Firefox不支持它（ 但它將在FF版本50中），請參閱我可以使用

---

您可以使用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>