How to prevent content selection with CSS?


Viewed 15,006 times


How to prevent text/content selection from my CSS web page?

This would be extremely useful for buttons, anchors, tags and other elements that could be selected without user interest...

2 answers


Using the following CSS rules for elements that cannot be selected:

#seletor {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
  • -o-user-select already included in some of these?

  • 1

    So I searched, the -Webkit-user-select is for opera!


    <script type="text/javascript">
        function RemoveSelection() 
           {if (window.getSelection) {window.getSelection().removeAllRanges();}}
<body onmouseup="RemoveSelection();">
    Select some content on this page with the mouse!
  • Although it apparently works (not tested), the question asks for a css solution, not js.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.