I am developing a web application and want to block selection of any text on the web page for the user. Personally I do not like add any Javascript for this. Is it doable using CSS only?
Thanks in advance.
5
-
4See: stackoverflow.com/questions/826782/…Tobias Bambullis– Tobias Bambullis2011-10-24 10:00:47 +00:00Commented Oct 24, 2011 at 10:00
-
Not as far as I'm aware with CSS 2.1 normally, you'd use JS for this. Can I ask why you don't want to add any JS for this end?dougajmcdonald– dougajmcdonald2011-10-24 10:01:27 +00:00Commented Oct 24, 2011 at 10:01
-
3Why would you want to do this? Just to annoy your users and force them to view the source of your page or deactivate CSS?JB Nizet– JB Nizet2011-10-24 10:06:53 +00:00Commented Oct 24, 2011 at 10:06
-
2@JB Nizet - my thoughts exactly. If you don't want people to copy your texts don't post them on the internet. You don't really achieve anything since they can still do a printscreen in the worst case.easwee– easwee2011-10-24 10:09:52 +00:00Commented Oct 24, 2011 at 10:09
-
I hope a normal user does not aware of debugging tools. And of course why he would like to see the css and source of the page :) My application have some drag and drop elements. The text can be selected even though it is draggable which causes the inconsistency. Thanks to all for your support.user658768– user6587682011-10-24 13:23:15 +00:00Commented Oct 24, 2011 at 13:23
Add a comment
|
1 Answer
I believe there are css3 rules (e.g. the user-select property) but at the time of writing they are not supported in all browsers. If you're looking for tricks, here is one:
Create an overlay DIV that is same size as the disabled DIV and place it over the disabled DIV using CSS positioning. You can use simple CSS or fall back to JavaScript if you have problems in calculating width, height or position. This could be annoying for the user by the way.
