make html text unselectable

Question

First, I have been here How to make HTML Text unselectable
But that doesn't solve my issue, (the JavaScript version works well, but I need to make it using HTML and CSS, I cannot use JavaScript) I used the recommended CSS, but look at my DEMO drag the mouse from [drag from here] to [to here] you will see that the text is still selectable.
any way to make it really unselectable?
Thanks

Answer 1

You can use CSS like this:

CSS

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}

For older IE versions, the issue usually is harder to deal with, but you can use a behavior:

CSS

.unselectable {
   behavior: url(ieUserSelectFix.htc);
}

and the behavior file "ieUserSelectFix.htc":

<public:component lightweight="true">

    <public:attach event="ondocumentready" onevent="stopSelection()" />

    <script type="text/javascript">
    <!--
        function stopSelection() {
            element.onselectstart = function() { return(false); };
            element.setAttribute('unselectable', 'on', 0);
        }
    //-->
    </script>
</public:component>

With Javascript you can:

yourElement.onselectstart = function() { return(false); };