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

 
  • http://www.digitalmarmalade.co.uk Andy McEniry

    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.

    • http://www.wprecipes.com Jean-Baptiste Jung

      Fixed, thanks :)

  • http://latitudu.blogspot.com Taufik Nurrohman

    Wahaaa… Cool! :)

  • http://www.cssjunction.com Shekhar

    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?

    • http://www.wprecipes.com Jean-Baptiste Jung

      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.

      • http://www.cssjunction.com Shekhar

        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 :).