I am trying to build a form to submit reviews for restaurants. For the star rating, I have created radio buttons and hid the display for both the button and the label and just shown the stars instead. I have tested and clicking a star successfully selects the underlying hidden radio button.
I am having issues styling these properly. When a star is clicked, the star should remain highlighted in the same color as when it is hovered, however it does not. The hover, pressed, and focused states are all configured to be the gold color as opposed to the gray.
Additionally, if someone were to click on the 4th star, I would need the other previous stars to be highlighted as well.
If anyone has any experience with something like this or can suggest a solution, it would be much appreciated.