How to prevent content selection with CSS?

Asked

Viewed 15,006 times

21

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...

css

2 answers

29


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!

-3

<head>
    <script type="text/javascript">
        function RemoveSelection() 
           {if (window.getSelection) {window.getSelection().removeAllRanges();}}
    </script>
</head>
<body onmouseup="RemoveSelection();">
    Select some content on this page with the mouse!
</body>

  • Although it apparently works (not tested), the question asks for a css solution, not js.

Browser other questions tagged css

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