mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
51 lines
1.2 KiB
HTML
51 lines
1.2 KiB
HTML
<div class="rating">
|
|
<input value="5" name="rate" id="star5" type="radio">
|
|
<label title="text" for="star5"></label>
|
|
<input value="4" name="rate" id="star4" type="radio">
|
|
<label title="text" for="star4"></label>
|
|
<input value="3" name="rate" id="star3" type="radio" checked="">
|
|
<label title="text" for="star3"></label>
|
|
<input value="2" name="rate" id="star2" type="radio">
|
|
<label title="text" for="star2"></label>
|
|
<input value="1" name="rate" id="star1" type="radio">
|
|
<label title="text" for="star1"></label>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by andrew-demchenk0 - Tags: radio, stars, rating */
|
|
.rating:not(:checked) > input {
|
|
position: absolute;
|
|
appearance: none;
|
|
}
|
|
|
|
.rating:not(:checked) > label {
|
|
float: right;
|
|
cursor: pointer;
|
|
font-size: 30px;
|
|
color: #666;
|
|
}
|
|
|
|
.rating:not(:checked) > label:before {
|
|
content: '★';
|
|
}
|
|
|
|
.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 {
|
|
color: #e58e09;
|
|
}
|
|
|
|
.rating:not(:checked) > label:hover,
|
|
.rating:not(:checked) > label:hover ~ label {
|
|
color: #ff9e0b;
|
|
}
|
|
|
|
.rating > input:checked ~ label {
|
|
color: #ffa723;
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|