Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rating using custom radio buttons, keyboard accessible.

Azhar 600

@azhar1038

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Rating is taken using custom radio buttons. One can focus it using tab and then select the rating using arrow buttons. Since it uses input type radio, most of the accessibility is taken care of automatically.

Most difficult part for me was to design the custom radio button. I ended up using "appearance: none;" to remove the default styling.

If you have any suggestion, please feel free to let me know.

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord