.starfield,
.starfield label::before
{
    display: inline-block;
}
 
.starfield label:hover,
.starfield label:hover ~ label
{
    filter: grayscale(0.5);;
}
 
.starfield *
{
    margin: 0;
    padding: 0;
}
 
.starfield input
{
    display: none;
}

.starfield
{
    unicode-bidi: bidi-override;
    direction: rtl;
}
 
.starfield label
{
    color: #f5b301;
    filter: grayscale(1);
}
 
.starfield label::before
{
    content: '\2605';
    width: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
}

.starfield label span
{
    display: none;
}
 
.starfield input:checked ~ label
{
    filter: grayscale(0);
}