CSS Rating Start не проверяется после щелчка

CSS

/* Hide Radio button */
.rate > input{
    display: none;
}

.rate{
    display: inline-block;
    border: 0;
}

.rate > label{
    float: right;
}
/* Showing the stars */
.rate > label:before{
    display: inline-block;
    font-size: 1.1rem;
    font-family: FontAwesome;
    content: "\f005";
    margin:0;
    padding:0.3rem .2rem;
    cursor: pointer;
}

/* Half star */
.rate .half:before{
    content: "\f089";
    position: absolute;
    padding-right: 0;
}

/* Click and hover */

input:checked ~ label, label:hover ~ label{
    color: #ffb503;
}

/* Hover highlight */
input:checked + label:hover, input:checked ~ label:hover, input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~label{
    color: #cc9000;
}

Я пытаюсь щелкнуть на старты и остатки, сохраненные по крайней мере на фронтенде, чтобы увидеть их как проверенные, но после того, как я щелкнул на один старт, он не остается с этим цветом, вместо этого он остается таким же, как и в начале. Как исправить это, чтобы после того, как я нажимаю, чтобы увидеть вход (чтобы увидеть звезды цветные)

Вернуться на верх