.rating {
    float: left;
    border: none;
}

    .rating:not(:checked) > input {
        position: absolute;
        top: -9999px;
        clip: rect(0, 0, 0, 0);
    }

    .rating:not(:checked) > label {
        float: right;
        width: 1em;
        padding: 0 .1em;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        font-size: 200%;
        line-height: 1.2;
        color: #ddd;
    }

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

    .rating > input:checked ~ label {
        color: #005EB8;
    }

    .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label {
        color: #005EB8;
    }

    .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: #005EB8;
    }

    .rating > label:active {
        position: relative;
    }