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.
Asked
Active
Viewed 184 times
0
-
4See: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – Tobias Bambullis Oct 24 '11 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 Oct 24 '11 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 Oct 24 '11 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 Oct 24 '11 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. – Oct 24 '11 at 13:23
1 Answers
2
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.
