Question

I need to prevent users from selecting elements in my web app UI, except for text in input fields and textareas. For Firefox, the technique seems to be to use this css:

* { -moz-user-select: none; }

And that works well enough (tested Firefox 3.5.2), except that you cannot then select within input fields or textareas.

I tried dividing it into

div,td,span,img { -moz-user-select: none; }
input,textarea { -moz-user-select: text; }

however, if the input field is inside of a div, td, or span, it is not selectable. It seems that the -moz-user-select property is applied to all children as well, no matter if those children override the setting. Does anyone know a way around this aside from setting this at a far more granular (and annoying) level for specific elements?

NOTE this is not for security purposes. I am fine having users view source or advanced users turning this off. But for web UI’s with drag-and-drop functionality, or just those that are supposed to behave like an application in general rather than like a document, it is really weird to be able to accidentally select text. And it happens often for most users.

Answer 1

* { -moz-user-select: -moz-none; }
input,textarea { -moz-user-select: text; }