Skip to content
Submitted 3 months ago

CSS only responsive multi-step form

MaelkMark•150
@MaelkMark
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Multi-step form
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm really proud of that this multi-step form is created with only pure css, without a line of js code. I know this isn't the correct approach for more complicated and bigger projects but I challenged myself and I've learnt a lot from it.

I know that the css is very messy, some parts lost their reusability, maybe I will refactor it some day, but for now, I'm happy with this.

What challenges did you encounter, and how did you overcome them?

This CSS-only challenge was not easy there were many difficulties. I used a lot of hidden (appearance: none) checkboxes and radio buttons to be able to step between the steps.

Community feedback

  • Sarah•280
    @Sarah-okoloPosted 3 months ago

    I meannnn... I am really blown away by this. I can't believe only CSS was used to achieve all that functionality. I had no idea CSS was even that capable. Your approach just goes to show its versatility and it's really awesome. Might not be reasonable for a real-world application, but that's beside the point right now😅.

    1
    MaelkMark•150
    @MaelkMarkPosted 3 months ago

    @Sarah-okolo Thank you very much!

    0

Please log in to post a comment

Log in with GitHub

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