title: Disable text cursor within a div
body: <p>Here are two fiddles: <a href="http://jsfiddle.net/54QM2/3/" rel="nofollow">fiddle 1</a> and <a href="http://jsfiddle.net/54QM2/4/" rel="nofollow">fiddle 2</a></p>
  
  <p>The only difference between the two is one CSS property in <code>.category</code></p>
  
  <pre><code>-webkit-user-select: none;
  </code></pre>
  
  <p>When you click and drag one of the elements, the latter fiddle keeps the pointer cursor instead of changing to the text cursor (caret?).  I would like that to be the case!</p>
  
  <p>The thing is, when I run the EXACT same HTML, CSS and JS in my browser (outside of JSFiddle), it no longer works and instead behaves like the first fiddle (which I don't want).  </p>
  
  <p>I had always understood that JSFiddle inherits the properties of the browser you are using, and so I am curious why the second fiddle works the way I would like it to, but the exact same code does not work when I run it in my browser.</p>
  
  <p>Thoughts?  Or maybe solutions to keep the pointer cursor at all times?</p>