Ngô Hùng Phúc February 2016

Rating star not working

Hi i have rating star using html and css.I try to use :checked in css code but the rating star can't hold the rating value.So how can i keep the rating value.Any suggestion about this.Thanks for support

Here is html

<div class="rate-container">
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
  <i class="fa fa-star "></i>
</div>

Css

.rate-container > i {
        float: right;
    }

    .rate-container > i:HOVER,
    .rate-container > i:HOVER ~ i {
        color: gold;
    }

Answers


Chris February 2016

You can definetly do this with pure html/css. I made this for my own site a while back. Hopefully this code will suffice to get you going.

The biggest change you'll have to do is to change the content property to be \f005; with the font-family: FontAwesome property, since I used icons instead of font. The rest should be more or less identical.

Good luck!

.rating {
    display: inline-block;
}

.rating:not(:checked) > input {
    display:none;
}

.rating:not(:checked) > label {
    float: right;
    width: 28px;
    padding: 0 4px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    font-size: 200%;
    line-height: 1.2;
    color: #ddd;
    filter: saturate(0);
    -webkit-filter: saturate(0);
    -moz-filter: saturate(0);
    -o-filter: saturate(0);

}

.rating:not(:checked) > label:before {
    content: url("http://i.imgur.com/1dT6Fai.png") ' ';
}

.rating > input:checked ~ label {
    filter: saturate(1);
    -webkit-filter: saturate(1);
    -moz-filter: saturate(1);
    -o-filter: saturate(1);
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    filter: hue-rotate(-50deg);
    -webkit-filter: hue-rotate(-50deg);
    -moz-filter: hue-rotate(-50deg);
    -o-filter:hue-rotate(-50deg);

}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
    filter: hue-rotate(-50deg);
    -webkit-filter: hue-rotate(-50deg);
    -moz-filter: hue-rotate(-50deg);
    -o-filter:hue-rotate(-50deg);

}

Demo

I should note that this code was inspired by some other source on the net. Unfortunately I don't have a link to it.


Magicprog.fr February 2016

You can keep selection for the current page like that (but it will not be stored):

.rating {
  border: none;
  float: left;
}
.rating > input {
  display: none;
}
.rating > label:before {
  display: inline-block;
  content: " \2605";
}
.rating > label {
  float: right;
}
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #FFD700;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FFED85;
}
<fieldset class="rating">
  <input type="radio" id="star5" name="rating" value="5" />
  <label for="star5" title="5 stars"></label>
  <input type="radio" id="star4" name="rating" value="4" />
  <label for="star4" title="4 stars"></label>
  <input type="radio" id="star3" name="rating" value="3" />
  <label for="star3" title="3 stars"></label>
  <input type="radio" id="star2" name="rating" value="2" />
  <label for="star2" title="2 stars"></label>
  <input type="radio" id="star1" name="rating" value="1" />
  <label for="star1" title="1 star"></label>
</fieldset>

Answer based on this: http://codepen.io/jamesbarnett/pen/vlpkh

Post Status

Asked in February 2016
Viewed 2,782 times
Voted 9
Answered 2 times

Search




Leave an answer