DEV Community

Discussion on: Pure CSS | Contact Form Dialog | Concept Design

moopet profile image
Ben Sinclair • Edited on

I tried forking that codepen thing but after 15 minutes I still can't figure out how to copy or paste anything!

What I mean is your solution relies on extra non-semantic classes, span, div and even i elements. If you wanted to make it "purely" CSS, you could attach your styles to the form, along with its legend, fieldset and various input elements themselves.

Using a checkbox to toggle visibility of a form is a trick that's been around for a while, and while it's a neat hack to get apparent functionality without any scripting, it relies on adding irrelevant checkboxes to your templates and then having to massage them to make them work accessibly.
How would you imagine a screen-reader user opening that form? Yes, you can do it, but it's awkward and relies on adding even more markup.

Whenever I see anyone say they're making something with "pure" CSS and it relies on extra markup, I think of this: you can replicate the Mona Lisa in such "pure" CSS if you add one div per pixel and colour it in with a unique selector...

Thread Thread
takaneichinose profile image
Takane Ichinose Author

I see, now I got your point. Yes, it's awkward to add another HTML element just to do this hack, but as of my knowledge at this point, this is the best I can do. I'm going to study more to find out what is the better way to do these kinds of action without using any Javascript code nor adding another HTML element. Thank you very much, I appreciate your comment :)