/*
                            Use :not with impossible condition so inputs are only hidden
                            if pseudo selectors are supported. Otherwise the user would see
                            no inputs and no highlighted stars.
                        */
.rating input[type="radio"]:not(:nth-of-type(0)) {
    /* hide visually */
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.rating [type="radio"]:not(:nth-of-type(0)) + label {
    display: none;
}

label[for]:hover {
    cursor: pointer;
}

.rating .stars label:before {
    content: "★";
}

.stars label {
    color: lightgray;
}

.stars label:hover {
    text-shadow: 0 0 1px #000;
}

.rating [type="radio"]:nth-of-type(1):checked ~ .stars label:nth-of-type(-n+1),
.rating [type="radio"]:nth-of-type(2):checked ~ .stars label:nth-of-type(-n+2),
.rating [type="radio"]:nth-of-type(3):checked ~ .stars label:nth-of-type(-n+3),
.rating [type="radio"]:nth-of-type(4):checked ~ .stars label:nth-of-type(-n+4),
.rating [type="radio"]:nth-of-type(5):checked ~ .stars label:nth-of-type(-n+5) {
    color: orange;
}

.rating [type="radio"]:nth-of-type(1):focus ~ .stars label:nth-of-type(1),
.rating [type="radio"]:nth-of-type(2):focus ~ .stars label:nth-of-type(2),
.rating [type="radio"]:nth-of-type(3):focus ~ .stars label:nth-of-type(3),
.rating [type="radio"]:nth-of-type(4):focus ~ .stars label:nth-of-type(4),
.rating [type="radio"]:nth-of-type(5):focus ~ .stars label:nth-of-type(5) {
    color: darkorange;
}