Snippets

Detect double click in CSS

The link will be only active if double-clicked.

<div class="test3">
  <span><input type="text" value="&nbsp;" readonly="true" />
  <a href="http://google.com">Double click me</a></span>
</div>

<style type="text/css">
.test3 span {
	position: relative;
}
.test3 span a { 
	position: relative;
	z-index: 2; 
}
.test3 span a:hover, .test3 span a:active { 
	z-index: 4; 
}
.test3 span input { 
	background: transparent; 
	border: 0; 
	cursor: pointer; 
	position: absolute; 
	top: -1px; 
	left: 0; 
	width: 101%;  /* Hacky */
	height: 301%; /* Hacky */
	z-index: 3; 
}
.test3 span input:focus { 
	background: transparent; 
	border: 0; 
	z-index: 1; 
}
</style>

Source: http://css-tricks.com/examples/CSSDoubleClick/...

Share this snippet

 
  • We love your site Jean and this is a great snippet.

    I copied & paste the code and it didn’t work; then noticed a typo on line 6 that says tyle instead of style.

    Hope this is of help.

  • Wahaaa… Cool! 🙂

  • Your are killing the accessibility by adding a non-usable and meaning less input field.

    Why do you want to detect double click with CSS?

    • I agree with you, personally I don’t see why I’ll use this technique on one of my sites. But still, it is interesting to know how you can do it, isn’t it, Maybe one day a client would request this kind of feature.

      • Jean,

        I guess client will ask you to make something happen on double click. He wouldnt be specifying how you do it. So CSS ?? Or JavaScript??

        Rather ‘ondblclick’ attribute is more handy & perfect way to do the same.

        Anyway – IT’S ALWAYS GOOD TO KNOW WHAT WE CAN DO :).