Making text unselectable in browser

Long time back, I was working in a project which required us to make a particular position of text unselectable by the user on a webpage.

I was looking at various JavaScript solutions and finally found the CSS selectable property. But it was not working across different browsers. It took a considerable effort to make it work across different browsers.

I found this code while browsing through archives and thought of posting it here so that I know where to find it, if I need it and also it would be useful for others who want to do the same thing.

BTW, one quick disclaimer. Even I hate it when people make a particular position of text unselectable in a browser. So use it if it is really needed and also remember it is not fool-proof.

Well, let’s see the code then.

<html>
<head>
<title>Making text unselectable</title>
<style>
body {
*-moz-user-select: none;
*-khtml-user-select: none;
*user-select: none;
}
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.selectOn {
-moz-user-select: ;
-khtml-user-select: ;
user-select: ;
}
</style>
</head>
<body unselectable="on">
<div class="unselectable" unselectable="on">
<span class="unselectable" unselectable="on">You cannot select this text.</span>
</div>
<div class="selectOn">
<p>This is normal text that you can select</p>
</div>
</body>
</html>

Related posts

Tags: ,

0 Comments so far

Follow up comments through RSS Feed | Post a comment

2 Tweetbacks so far

Leave a Reply

Your email address will not be published. Required fields are marked *