Selectable input fields and textareas but no other content selectable in Firefox?

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?

Answer 1

You are fighting a lost cause. If I really want to select text from your page, or get it in some way, I will.

However, on to your question. Try adding !important to the end, so it looks like this:

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