Disable Selction on Menu Items with this jQuery Extension

Every now and then I encounter menus or draggable/droppable elements that when clicked, get unintentionally selected. This results in CSS buttons that don’t behave like buttons but more like clickable text. If you really want to fine tune your user experience and have snazzy CSS buttons then you read on.

The following screen capture highlights the differences in the two menus. The second one looks much better especially if it can stay that way.


If you are using jQuery, you can easily extend the core by adding a disableSelection function like so:

	disableSelection : function() {
		return this.each(function() {
			this.onselectstart = function() { return false; };
			this.unselectable = "on";
			jQuery(this).css('user-select', 'none');
			jQuery(this).css('-o-user-select', 'none');
			jQuery(this).css('-moz-user-select', 'none');
			jQuery(this).css('-khtml-user-select', 'none');
			jQuery(this).css('-webkit-user-select', 'none');

Usage is easy:

// disable selection on all button objects

This will disable selection on all elements with the button class <div class="button">Wall Papers</div>.

Note for jQuery UI Core users:Thomas Christensen points out that the jQuery UI core offers undocumented functions .disableSelection() and .enableSelection() which achieves the same result.

CSS Approach

Additionally you may also want to add the following to CSS markup for added cushioning (or use it exclusively and forgo the Javascript solution altogether):

.button {
	user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;

10 Responses

This article is no longer open for comments