0

I'm currently working in an environment where I can't change the HTML structure.

I'm trying to make a star rating form. I have been able to do 75% of it but now I'm stuck and looking for help.

here the structure : 

<div class="input">
    <ul class="inputs-list multi-container">
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Very Disatisfied">
                <span>Very Disatisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio"  value="Disatisfied">
                <span>Disatisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Correct">
                <span>Correct</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Satisfied">
                <span>Satisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Very Satisfied">
                <span>Very Satisfied</span>
            </label>
        </li>
    </ul>
</div>

and my css code:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

label > input:before { 
  /*margin: 5px;*/
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

label > input:checked,
label:not(:checked) > input:hover{ color: #FFD700;  }

li {list-style:none;}

Up to now, when an input is checked the star is yellow and when I hover over another star they become yellow as well.

What I'm not able to do is to make previous stars yellow. So if I clicked on the third star, I would like star 1&2 to be yellow as well.

Any help would be appreciated. Let me know if you need more details! Thanks

Antoine Sp
  • 11
  • 2
  • you cannot do that with css alone - there is no previous sibling selector or parent selector (which you would need with that html structure). If you need a pure css star rating thing, this guy seems to have made one: https://codepen.io/jamesbarnett/pen/vlpkh - it starts all the inputs and labels on the same level and then starts them yellow and then anything after the checked or hovered he turns them grey – Pete Nov 23 '17 at 17:04
  • @Pete so i need to do it with javascript ? I can't modified the html structure – Antoine Sp Nov 23 '17 at 17:07

0 Answers0