Disable text select with JavaScript and/or CSS

Question

I am trying to create a text button using simple span and formatting the text and providing onclick behaviour. The problem is when a user clicks on the button, it sometimes highlights the text of the button.

I want to avoid such behaviour, because it looks damn ugly when the text is selected. Is there any CSS/JavaScript/(jQuery) content I can use to avoid this?

Answer 1

spanid.onselectstart = function() {return false;} // ie
spanid.onmousedown = function() {return false;} // mozilla

First result on Google by the way...

extra

$('#spanid').selectstart(function(event) {
  event.preventDefault();
});

Answer 2

For a CSS solution:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none; /* Isn't Konquerour dead? */
    -moz-user-select: -moz-none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

But, looking here, CSS solution is not enough in late 2013, so you should add some javascript. There are good answers around.

Answer 3

You can just write:

$('#spanid').disableSelection();