Search code examples
htmlcssfirefoxbackground-position

input[type=radio]:checked + label with background-position-y doesn't work in Firefox

CSS selector input[type=radio]:checked + label doesn't work in Firefox only!

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>

How to fix it?

Solution

  • The background-position-x and background-position-y are 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.

    It isn't supported in Firefox (yet, it will be in FF version 50), see Can I Use

    SS

    you can use background-position instead:

    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>