Selectable input and text fields, but no other content can be selected in Firefox?

Question

I need to prevent users from selecting items in the web application user interface, with the exception of text in input fields and text fields. For Firefox, the method seems to use this css:

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

And it works quite well (tested by Firefox 3.5.2), except that you cannot select input or text fields.

I tried to divide it into

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

however, if the input field is inside a div, td or span, it cannot be selected. The -moz-user-select property seems to apply to all children, regardless of whether these children override these settings. Does anyone know a way around this, besides setting it at a much more granular (and annoying) level for certain elements?

NOTE this is not for security purposes. I understand very well that users are browsing by source or advanced users, disabling this. But for a web interface with a drag and drop function or just those that should behave as an application as a whole and not as a document, it is really strange to be able to randomly select text. And this often happens for most users.

Answer 1

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

Answer 2

You fight the lost cause. If I really want to select text from your page or get it somehow, I will.

However, to your question. Try to add! It is important to the end, so it looks like this:

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