Skip to content

Instantly share code, notes, and snippets.

@Artem-Schander

Artem-Schander/css

Last active Sep 4, 2017
Embed
What would you like to do?
star rating - radio
.rating {
border: none;
float: left;
}
.rating > input { display: none; }
.rating > label:before {
margin: 5px;
font-size: 1.25em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin-bottom: 0;
}
/* highlight stars on hover */
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { /* hover previous stars in list */
color: #aaa;
}
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label {
color: #999;
}
.rating.active > input:checked ~ label {
color: #FFD700;
}
.rating.active:hover > input:checked ~ label {
color: #ddd;
}
.rating.active > input:checked + label:hover, /* hover current star when changing rating */
.rating.active > input:checked ~ label:hover,
.rating.active > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating.active > input:checked ~ label:hover ~ label {
color: #FFD700;
}
<fieldset class="rating">
<input type="radio" class="rating-input" id="rating-input-1-5" name="rating-input-1" />
<label for="rating-input-1-5" class="star"></label>
<input type="radio" class="rating-input" id="rating-input-1-4" name="rating-input-1" />
<label for="rating-input-1-4" class="star"></label>
<input type="radio" class="rating-input" id="rating-input-1-3" name="rating-input-1" />
<label for="rating-input-1-3" class="star"></label>
<input type="radio" class="rating-input" id="rating-input-1-2" name="rating-input-1" />
<label for="rating-input-1-2" class="star"></label>
<input type="radio" class="rating-input" id="rating-input-1-1" name="rating-input-1" />
<label for="rating-input-1-1" class="star"></label>
</fieldset>
$(function() {
$('.rating-input').click(function() {
$(this).closest('.rating').addClass('active');
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.