Account Deleted
To fix that issue you need to use :focus in CSS instead of active. Using Focus will make that something happens only if you click on it, and it will end if you click away.
@simokitkat
Posted
@JustKooba I tried :focus now but it's still the same unfortunately.
Account Deleted
@simokitkat sadly i dont know how to fix it. You can check my design maybe you'll find a solution there.
@marchin7
Posted
@simokitkat The :focus CSS pseudo-class doesn't work on divs. You'd need to change it for <button> or <li> in order to work.
@simokitkat
Posted
@marchin7 & @JustKooba Thank you both so much for trying to help me yesterday, I searched more on google regarding the issue in my code and it turns out that even after changing the pseudo class :active to :focus it wasn't working because of the following: The :focus pseudo class works automatically on interactive tags such as <button> and <a> so to fix my issue I had one of two options: 1- add the tabindex attribute, google it guys, I didn't know about it myself, but now I do and it did fix the issue. 2- a more semantic solution was to change the <div> elements to <button> elements and it would have worked too.
I also added the preventDefault() method to the submit button in case the user doesn't choose any of the five ratings, just to make the application even better.
