.rating:not(:checked) > form > input {
    position: absolute;
    appearance: none;
}

.rating:not(:checked) > form > label {
    float: right;
    cursor: pointer;
    font-size: 30px;
    color: #666;
}

.rating:not(:checked) > form > label:before {
    content: '★';
}

.rating > form > input:checked + label:hover,
.rating > form > input:checked + label:hover ~ label,
.rating > form > input:checked ~ label:hover,
.rating > form > input:checked ~ label:hover ~ label,
.rating > form > label:hover ~ input:checked ~ label {
    color: #e58e09;
}

/*.rating:not(:checked) > label:hover,*/
/*.rating:not(:checked) > label:hover ~ label {*/
/*    color: #ff9e0b;*/
/*}*/

.rating > form > input:checked ~ label {
    color: #ffa723;
}