GrinderZ GrinderZ - 5 months ago 12
CSS Question

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?

Answer

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, see Can I Use

SS


you can use this instead:

input[type=radio]:checked + label {
  background-position: 0 -40px;
}

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>