Simulate "onselectstart = return false" using CSS or another non-JS approach?

Question

I created a button CSS class that uses background images with different positions to display a different image during normal, mouseover and click. One thing that completely destroys the visual effect is that if I click the link again and move the mouse only in pixels, the link text is selected.

Is there any way to achieve the effect

onselectstart = "return false;" 

without indicating what for each button? A CSS based solution would be perfect, but I can't think of one. Any ideas?

One way is to iterate through each button element using a prototype or jQuery and manually set the onselectstart event. However, I am allergic to Javascript when it’s not really necessary, and would appreciate any ideas not related to JS.

Edit: I found a solution for Mozilla browsers:

  -moz-user-select:none; 

Answer 1

One thing that completely destroys the visual effect is that if I click such a link repeatedly and move the mouse only a pixel, the link text is selected.

Is this really a link? Usually you cannot select link text.

If you use, for example. div as faux-link, maybe you should use the link instead (if it goes somewhere with real href) or the enter button if it is only for scripts (although it takes some styling to lose the default browser styles, which is a little pain).

Otherwise, Safari / Chrome / Konqueror replicates the Mozilla property under its name:

 -webkit-user-select: none; -khtml-user-select: none; 

For other browsers, you will need a JavaScript solution. Note onselectstart returning false is sufficient only in IE and Safari / Chrome; Mozilla and Opera also need to return false onmousedown . This can also stop click firing, so you will need to do something that you planned for the button in the mousedown handler before returning false, not onclick .

Of course, you can assign these handlers from a script to avoid markup markup, for example:

 <div class="button">...</div> .button { -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; } function returnfalse() { return false; } var divs= document.getElementsByTagName('div'); for (var i= divs.length; i-->0;) div.onselectstart= returnfalse;