I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
I like when people try to do this, but I feel the need to point out that "pure CSS" would not require any extra HTML elements, whereas this example uses a host of "wrapper" classed divs and so on.
Front end web developer by profession, game developer by hobby. I love learning many things about web development.
I love creating music, and pixel art graphics for my game.
Location
Kanagawa, Japan
Education
Colegio de San Juan de Letran - Calamba Campus
Work
Front End Web Developer, Full-Stack Web developer, Programmer
Thank you for your comment. I'm aware that there might be few other ways to do it. But as of now, I'm only familiar with 2 methods. The other one is using "target" pseudo-selector. If happens that you havn another idea, please sharn it with me, so that I could practice more methods.
I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
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...
Front end web developer by profession, game developer by hobby. I love learning many things about web development.
I love creating music, and pixel art graphics for my game.
Location
Kanagawa, Japan
Education
Colegio de San Juan de Letran - Calamba Campus
Work
Front End Web Developer, Full-Stack Web developer, Programmer
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 :)
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I like when people try to do this, but I feel the need to point out that "pure CSS" would not require any extra HTML elements, whereas this example uses a host of "wrapper" classed divs and so on.
Thank you for your comment. I'm aware that there might be few other ways to do it. But as of now, I'm only familiar with 2 methods. The other one is using "target" pseudo-selector. If happens that you havn another idea, please sharn it with me, so that I could practice more methods.
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,divand evenielements. If you wanted to make it "purely" CSS, you could attach your styles to the form, along with itslegend,fieldsetand variousinputelements 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...
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 :)