0

EDIT: This is not a duplicate as HTML Structure on this question is very specific.

I've hit a minor road block while implementing a Star rating system in CSS. There are two outstanding items which I can't get past.

The radio buttons will eventually be hidden.

Unfortunately I am very limited on the structure of my HTML and this is the structure that I have to stay within.

1) Once a radio button is clicked, the associated star to turn blue.

2) Once a radio button is clicked, all of the previous stars will also turn blue.

.scale-label {
  display: none;
}
.scale-option:before {
  color: #CCC;
  content: "\2605";
  font-size: 25px;
}
.scale-option:hover:before {
  color: gold;
}
<div id="view-container">
  <label class="scale-option">
    <input class="scale-input" type="radio" value="1" name="satisfaction">
    <span class="scale-label">1</span>
  </label>
  <label class="scale-option">
    <input class="scale-input" type="radio" value="2" name="satisfaction">
    <span class="scale-label">2</span>
  </label>
  <label class="scale-option">
    <input class="scale-input" type="radio" value="3" name="satisfaction">
    <span class="scale-label">3</span>
  </label>
</div>

I also have a CodePen.

Sohrab Hejazi
  • 1,441
  • 6
  • 18
  • 29
  • You can not select the label element based on the radio button state, CSS can not select upwards in the DOM - you would have to apply the star to the span element following the input first of all. But 2) still won't be possible, the input fields aren't siblings. – CBroe Feb 23 '18 at 18:41
  • 1
    What you are trying to do isn't possible with the html your using. Give it a quick google, this is the first result for example https://codepen.io/jamesbarnett/pen/vlpkh – Jon Feb 23 '18 at 18:44

0 Answers0