<div id="full-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" name="rating" id="rating-none" value="0" type="radio">
<label aria-label="No rating" class="rating__label" for="rating-none"><i class="rating__icon rating__icon--none fa fa-ban"></i></label>
<label aria-label="1 star" class="rating__label" for="rating-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-3" value="3" type="radio" checked>
<label aria-label="4 stars" class="rating__label" for="rating-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating" id="rating-5" value="5" type="radio">
</div>
<p class="desc" style="margin-bottom: 2rem; font-family: sans-serif; font-size:0.9rem">Full stars<br/>'No rating' option</p>
</div>
<div id="half-stars-example">
<div class="rating-group">
<input class="rating__input rating__input--none" checked name="rating2" id="rating2-0" value="0" type="radio">
<label aria-label="0 stars" class="rating__label" for="rating2-0"> </label>
<label aria-label="0.5 stars" class="rating__label rating__label--half" for="rating2-05"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-05" value="0.5" type="radio">
<label aria-label="1 star" class="rating__label" for="rating2-10"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-10" value="1" type="radio">
<label aria-label="1.5 stars" class="rating__label rating__label--half" for="rating2-15"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-15" value="1.5" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating2-20"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-20" value="2" type="radio">
<label aria-label="2.5 stars" class="rating__label rating__label--half" for="rating2-25"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-25" value="2.5" type="radio" checked>
<label aria-label="3 stars" class="rating__label" for="rating2-30"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-30" value="3" type="radio">
<label aria-label="3.5 stars" class="rating__label rating__label--half" for="rating2-35"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-35" value="3.5" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating2-40"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-40" value="4" type="radio">
<label aria-label="4.5 stars" class="rating__label rating__label--half" for="rating2-45"><i class="rating__icon rating__icon--star fa fa-star-half"></i></label>
<input class="rating__input" name="rating2" id="rating2-45" value="4.5" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating2-50"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating2" id="rating2-50" value="5" type="radio">
</div>
<p class="desc" style="margin-bottom: 2rem; font-family: sans-serif; font-size:0.9rem">Half stars<br/>
Space on left side to select 0 stars</p>
</div>
<div id="full-stars-example-two">
<div class="rating-group">
<input disabled checked class="rating__input rating__input--none" name="rating3" id="rating3-none" value="0" type="radio">
<label aria-label="1 star" class="rating__label" for="rating3-1"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-1" value="1" type="radio">
<label aria-label="2 stars" class="rating__label" for="rating3-2"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-2" value="2" type="radio">
<label aria-label="3 stars" class="rating__label" for="rating3-3"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-3" value="3" type="radio">
<label aria-label="4 stars" class="rating__label" for="rating3-4"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-4" value="4" type="radio">
<label aria-label="5 stars" class="rating__label" for="rating3-5"><i class="rating__icon rating__icon--star fa fa-star"></i></label>
<input class="rating__input" name="rating3" id="rating3-5" value="5" type="radio">
</div>
<p class="desc" style="font-family: sans-serif; font-size:0.9rem">Full stars<br/>
Must select a star value</p>
</div>/*
* Pure CSS star rating that works without reversing order
* of inputs
* -------------------------------------------------------
* NOTE: For the styling to work, there needs to be a radio
* input selected by default. There also needs to be a
* radio input before the first star, regardless of
* whether you offer a 'no rating' or 0 stars option
*
* This codepen uses FontAwesome icons
*/
#full-stars-example {
/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
display: inline-flex;
}
/* make hover effect work properly in IE */
.rating__icon {
pointer-events: none;
}
/* hide radio inputs */
.rating__input {
position: absolute !important;
left: -9999px !important;
}
/* set icon padding and size */
.rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 2rem;
}
/* set default star color */
.rating__icon--star {
color: orange;
}
/* set color of none icon when unchecked */
.rating__icon--none {
color: #eee;
}
/* if none icon is checked, make it red */
.rating__input--none:checked + .rating__label .rating__icon--none {
color: red;
}
/* if any input is checked, make its following siblings grey */
.rating__input:checked ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star {
color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make none icon grey on rating group hover */
.rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
color: #eee;
}
/* make none icon red on hover */
.rating__input--none:hover + .rating__label .rating__icon--none {
color: red;
}
}
#half-stars-example {
/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
display: inline-flex;
}
/* make hover effect work properly in IE */
.rating__icon {
pointer-events: none;
}
/* hide radio inputs */
.rating__input {
position: absolute !important;
left: -9999px !important;
}
/* set icon padding and size */
.rating__label {
cursor: pointer;
/* if you change the left/right padding, update the margin-right property of .rating__label--half as well. */
padding: 0 0.1em;
font-size: 2rem;
}
/* add padding and positioning to half star labels */
.rating__label--half {
padding-right: 0;
margin-right: -0.6em;
z-index: 2;
}
/* set default star color */
.rating__icon--star {
color: orange;
}
/* set color of none icon when unchecked */
.rating__icon--none {
color: #eee;
}
/* if none icon is checked, make it red */
.rating__input--none:checked + .rating__label .rating__icon--none {
color: red;
}
/* if any input is checked, make its following siblings grey */
.rating__input:checked ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star,
.rating-group:hover .rating__label--half .rating__icon--star {
color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star,
.rating__input:hover ~ .rating__label--half .rating__icon--star {
color: #ddd;
}
/* make none icon grey on rating group hover */
.rating-group:hover .rating__input--none:not(:hover) + .rating__label .rating__icon--none {
color: #eee;
}
/* make none icon red on hover */
.rating__input--none:hover + .rating__label .rating__icon--none {
color: red;
}
}
#full-stars-example-two {
/* use display:inline-flex to prevent whitespace issues. alternatively, you can put all the children of .rating-group on a single line */
.rating-group {
display: inline-flex;
}
/* make hover effect work properly in IE */
.rating__icon {
pointer-events: none;
}
/* hide radio inputs */
.rating__input {
position: absolute !important;
left: -9999px !important;
}
/* hide 'none' input from screenreaders */
.rating__input--none {
display: none
}
/* set icon padding and size */
.rating__label {
cursor: pointer;
padding: 0 0.1em;
font-size: 2rem;
}
/* set default star color */
.rating__icon--star {
color: orange;
}
/* if any input is checked, make its following siblings grey */
.rating__input:checked ~ .rating__label .rating__icon--star {
color: #ddd;
}
/* make all stars orange on rating group hover */
.rating-group:hover .rating__label .rating__icon--star {
color: orange;
}
/* make hovered input's following siblings grey on hover */
.rating__input:hover ~ .rating__label .rating__icon--star {
color: #ddd;
}
}
body {
padding: 1rem;
text-align: center;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.