2

In the example below, why does the selected star and all the stars before it not stay yellow?

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

.rating {
  display: inline;
  border: none;
}

.rating > label > input {
  margin: 0px;
}

.rating > label:before {
  margin: 0px;
  font-size: 1em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label { 
  color: #ddd;
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:hover label { color: #FFD700; } /* hover previous stars in list */
.rating:not(:checked) > label:hover { color: #FFD700; } /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #ddd;  } /* un-hover stars after current star */
<form>
  <fieldset class="rating">
    <label for="radio1"><input id="radio1" type="radio" value="1"></label>
    <label for="radio2"><input id="radio2" type="radio" value="2"></label>
    <label for="radio3"><input id="radio3" type="radio" value="3"></label>
    <input type="submit" value="Submit">
  </fieldset>
</form>

The lines of code that are causing the problem in my code are:

/* css */  

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:hover label { color: #FFD700; } /* hover previous stars in list */

I can't figure out why the selectors aren't working as intended.

Please help!

Nhan
  • 3,595
  • 6
  • 30
  • 38
Jarrod
  • 1,655
  • 2
  • 21
  • 35
  • check this topic: http://stackoverflow.com/questions/2324446/how-to-build-a-basic-and-simple-5-star-rating-system#2324543 – moped Jul 03 '16 at 05:20
  • There are many, many, many issues with your code, more than just the use of :checked, not enough to be able to fit in a single comment. At this point you are better served by referring to an existing implementation. – BoltClock Jul 03 '16 at 05:21
  • @BoltClock That's actually what I'm trying to do. But I also have to get it working with my Django code. I think I really need to revisit how I'm going about this. – Jarrod Jul 03 '16 at 05:41

2 Answers2

2

because your checkbox isn't a child of .rating, you've wrapped it in a label so your code must be you need to take your input out of the label:

<input id="radio1" type="radio" value="1"><label for="radio1"></label>

and then change your css to:

.rating > input:checked + label{}
Amin Jafari
  • 7,157
  • 2
  • 18
  • 43
  • Django is putting the input inside the label, I'm simply using the template language. And as far as I can tell, it's a bit of a pain to not do this. – Jarrod Jul 03 '16 at 05:30
  • 1
    you can not select the parent element in css, if you can't change the html structure, I'm afraid you have to use js – Amin Jafari Jul 03 '16 at 06:11
1

A working JSFiddle https://jsfiddle.net/LeoAref/s3btcwjg/

Here we can use the Adjacent sibling CSS selector +

.rating input:checked + label,
.rating input:hover + label,
.rating label:hover { color: #FFD700; }

And edit the HTML to be like:

<form>
    <fieldset class="rating">
        <input id="radio1" type="radio" name="radio" value="1"><label for="radio1"></label>
        <input id="radio2" type="radio" name="radio" value="2"><label for="radio2"></label>
        <input id="radio3" type="radio" name="radio" value="3"><label for="radio3"></label>
        <input type="submit" value="Submit">
    </fieldset>
</form>
Muhammad Hamada
  • 725
  • 5
  • 13