When the mouse is put on the icon, it is implemented so that it is colored. It works as expected on Chrome, Edge, Firefox and Safari, but for some reason IE11 has only one star colored.
How can we solve this behaviour?
When you put the mouse, we have implemented the color so that it is.
.rate {
font-size: 0;
white-space: nowrap;
display: inline-block;
width: 280px;
height: 50px;
overflow: hidden;
position: relative;
background: #eee;
background-size: contain;
}
.rate>i {
opacity: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 20%;
z-index: 1;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='star' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' class='svg-inline--fa fa-star fa-w-18 fa-9x' style='width: 48px; height: 48px; opacity: 1;'%3E%3Cpath fill='red' d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z' class=''%3E%3C/path%3E%3C/svg%3E");
}
.rate>input {
-moz-appearance: none;
-webkit-appearance: none;
opacity: 0;
display: inline-block;
width: 20%;
height: 100%;
margin: 0;
padding: 0;
z-index: 2;
position: relative;
}
.rate>input:hover+i,
input:checked+i {
opacity: 1;
}
.rate>i~i {
width: 40%;
}
.rate>i~i~i {
width: 60%;
}
.rate>i~i~i~i {
width: 80%;
}
.rate>i~i~i~i~i {
width: 100%;
}<span class="rate"><input type="radio"value="1"><i></i><input type="radio" value="2"><i></i><input type="radio" value="3"><i></i><input type="radio" value="4"><i></i><input type="radio" value="5"><i></i></span>