Introduction...

You've probably tried the :active pseudo selector and found that the styling is only given when the user is holding the mouse down. And so it is that it's not a very great way of mimicking the JS onclick event. However, it is possible to mimic onclick in pure HTML/CSS! Take a look at the following pen.

See the Pen Pure CSS Login popup by Sean (@Chesswithsean) on CodePen.

The Basics...

There is no JS, just plain HTML + CSS. How does it work? Well lets start with the basics. Take a look at the following pen:

See the Pen input:checked styling label by Sean (@Chesswithsean) on CodePen.

How does that work? If you don't know, here's a quick explanation. (If you already know this, you may want to read it anyway...) You start with the basics:

  <input type="checkbox" id="something"> <!--You can change the id to something else, just make sure that the label references it. -->
<label for="something">Click here</label>
<!--Of course, we use for="something" so that the <label> will be "connected" to
the <input>-->

And then we can add the basic CSS:

  input:checked + label {
  color: green;
}

However, perhaps you've noticed a problem - the checkbox ruins the styling. This is why we add display: none to the input :)

See the Pen input:checked styling label 2 by Sean (@Chesswithsean) on CodePen.

And now to the point...

By now I hope you are beginning to understand how this all works. Now back to the original pen at the top of this post. Just kidding, I'll post it below (again) for convenience.

See the Pen Pure CSS Login popup by Sean (@Chesswithsean) on CodePen.

That "Log in" button is really just a <label> element in disguise. I've hidden the checkbox, so that it all looks nice.

By the way, if you want to see the pen with the checkbox visible, it's easy. Just go to here, navigate to the CSS and remove the following code:

  #btn {
  display: none;    
}

And there should be a checkbox visible at the top-left corner of the pen.

Anyway, lets continue with the point. When the checkbox is :checked the popup (.overlay) is visible. When it is not :checked it is not visible.

Perhaps you've noticed that when you click the "Log in" , the "Google", or the "Facebook" button in the popup box, the popup is hidden. Why? Well they to are actually <label>s that are linked to that one input[type="checkbox"] ;) You can see that by looking at the source code.

Conclusion...

You can indeed use this hack to simulate the onclick event from JS. However, is this better than using JavaScript? You would have to decide that. It certainly would depend on the situation.

Please post in the comments if this helped you, or if you need more help. Suggestions are also appreciated. Also, if you do a pure HTML/CSS click pen, please post a link to it in the comments :)

Have a nice day :)

7,804 1 9