Making text unselectable in browser

You are here: Home » » Blog » Making text unselectable in browser

Making text unselectable in browser

Published Sep 28, 2011 | In Web Programming

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>

Tags: css, Unselectable

0 Comments so far

Follow up comments through RSS Feed | Post a comment

2 Tweetbacks so far

sudarmuthu (Sudar) says:

Sep 28, 2011 at 3:21 PM

Making text unselectable in browser http://t.co/28NW7WEq

Reply
phalgun_g (Phalgun Guduthur) says:

Sep 28, 2011 at 3:59 PM

RT @sudarmuthu: Making text unselectable in browser http://t.co/28NW7WEq

Reply

Night Dreaming (by Sudar)