Grow your CSS skills. Land your dream job.

Double Click in CSS

Published by Chris Coyier

With the recent proliferation of touch devices, the web designers of the world are losing our beloved mouse pointer. There has been some interesting talk about how we essentially lose the :hover pseudo class in CSS as well as mouseenter, mouseleave, and mousemove in JavaScript. Then just earlier this week I did a post about how you can use the tabindex attribute to basically respond to a click with pure CSS. It got me thinking, can we somehow pull off a double click with pure CSS too? This would by no means replace the hover event, but might be somewhat of an alternative to have the sequence be: tap → change state / activate link → tap again to visit link.

Rabble rabble rabble!

These newfangled touch devices all support JavaScript anyway! You can just use JavaScript to make double click events! Rabble rabble rabble!

Yes, you can. For anyone interested, "dblclick" is a native JavaScript event. If you wanted to, for example, force links to be double clicked instead of single clicked, you could bind a simple { return false; } function to the click event. Then also bind a function to dblclick that would change the window.location to the links href attribute.

This article isn't about that, it's about hardcore CSS nerdery and seeing if we can also do it without using JavaScript.

The Results

I really wanted to boil it down to one technique and declare it the best possible way to accomplish CSS double clicking. But as it turns out, there are just too many issues and considerations to do that. Instead, I made up a page showing all the most interesting techniques tried.

Most of the techniques involve some kind of covering element which is hidden, kicked off the page, or buried when the first click happens. That first click can come in the form of :active or :focus. :active is nice because it doesn't require HTML5. :focus does, because it needs the element to have a tabindex or contenteditable attribute to be able get focus. One way around that was to use an input element to do the covering, but that has it's own quirks.

All in all, it was a nerdy good time poking around with this idea. There are probably dozens more ideas, but for something this ultimately trivial I had to nip it in the bud and call it a wrap.

View Demo

Credits

There was probably more than twenty different things tried between me and others. Special thanks to Darcy Bross and this comment on Forrst for the first lead into working examples and to Mattias Buelens and Topher Wilson for playing with it and working on variations.

More

If you want to play around with the idea, I suggest tinking around on JSBin and saving your best examples. I'll link em up here if you guys figure out some awesome ones. Here are some interesting ones that happened in playing with all this:

http://jsbin.com/uqana4/2/
http://jsbin.com/owuso/6/

Comments

  1. Permalink to comment#

    what elements that accept dblclick event?

    is it only “input” and “a” element?

  2. Permalink to comment#

    Two problems I see with this:

    1.) it’s not a double-click. it’s “two clicks.” If I click once, I can come back any time later to do the second click. If you’re careful with the rest of the css, people will notice the “hover” state and catch on that it can be clicked. But, otherwise, I think the inconsistency will lead to confusion.

    2.) Similarly, if a mobile user (or, more to the point, a mouse user) will have to take a moment to adjust to what is happening. “Why doesn’t my mouse work?” will lead to “what the hell is wrong with this website?” before the realization sets in: “oh, double-click.” But I’m not sure they’re likely to be in the best of moods for web-feature-discovery at that point. The double-click isn’t as intuitive as it once was, anyway. More applications and OSs single-click.

    • Don’t spend too much time thinking about user behavior in regards to this. I really don’t recommend using it all all. The point again, was just figuring out if it could be done.

      Most of the techniques are indeed, click-and-click-later not true double clicks. The one that comes closest is the one utilizing :active, where you click to activate the link, but it “inactivates” if you hover off.

  3. Simon
    Permalink to comment#

    lol’d hard :D

  4. Permalink to comment#

    I don’t really see the point of :hover for link/button elements on mobile devices. With a standard screen it’s nice to have a recognizable sign of where your cursor is since it is a device disconnected from your person. When I’m using my fingers though it’s just not a real issue.

    I was thinking about this issue the other day when I picked up my new phone.

    I do understand this is a ‘think piece’ though, just wanted to give my 2 cents.

    • Permalink to comment#

      Secondarily – I think we (designers/developers) need to focus on the all-to-often :active state. It’s easy to let it slide since we work on 10Mbps+ connections, but 3G can take a few seconds. Lett users know that they pressed something is important.

  5. toyotabedzrock
    Permalink to comment#

    You should press the phone makers to use screens that can detect that a finger is close to but not actually pressing on the display.

    Capacitive screens have this ability, it’s just not perfected yet.

  6. Tom
    Permalink to comment#

    Rabble rabble rabble … you can’t do that … rabble rabble rabble … I protest … rabble rabble!

  7. Steven Schrab
    Permalink to comment#

    This is an interesting problem with touch interfaces. We’d been discussing it around here a lot lately particularly when dealing with drop down navigation where the activator tab is also a link. Touching the tab will open the drop down, but then open the page the tab is linked too.

    Adding a double click function seems like a good solution when one is on a touch device.

    It’s also cool to see your experiments. You can learn a lot by seeing how you got to your final result.

  8. Permalink to comment#

    i just confused what you trying to say, i think it is not really double click

  9. Chris
    Permalink to comment#

    this is useless, lets just go ahead and create more work for our users…

  10. Permalink to comment#

    Can be useful. I will see if I can use it on my site.

    Thanks for the post.

    Mazy

  11. it’s interesting, but useless, i think.

  12. Permalink to comment#

    Hey…This is certainly interesting and I like the buried inputs on focus. However, I honestly do not see a purpose for this. Cool stuff though!

  13. Permalink to comment#

    I think what Chris was trying to do is expand perception and possibilities. Who knows? Maybe this exercise sparked something in another project of yours that just might fix that bug you can’t figure out.

    Thanks for this study in unique CSS techniques. ;)

  14. Permalink to comment#

    I wonder what will happen when Internet V2 arrives. No more images?

  15. i think this is css trick :)

  16. mar
    Permalink to comment#

    This wouldnt work in Webkit because dblclick causes zoomin/zoomout. And not only on Android

  17. Permalink to comment#

    confusing me

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".