Some rules for :: selection and :: - moz-selection (and user-select?)

Question

I have a website where I first installed

::selection { background: transparent; } ::-moz-selection { background: transparent; } * { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } 

(Only for artistic effect, not because I'm trying to stop people from copying something.)

But then, later, I want the user to be able to select text from the text box.
I was able to make a selection again,

 #commentarea::selection { background: #070707; } #commentarea::-moz-selection { background: #070707; } #commentarea { -moz-user-select: element; -khtml-user-select: element; -webkit-user-select: element; -o-user-select: element; user-select: element; } 

but if the user selects something from the text field, it cannot be undone by clicking somewhere. You can deselect the text by moving the carriage (with arrows).

Why? And how can I prevent this?

Answer 1

Edit

 #commentarea { -moz-user-select: element; -khtml-user-select: element; -webkit-user-select: element; -o-user-select: element; user-select: element; } 

to

 #commentarea { -webkit-user-select: text; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -o-user-select: text; } 

DEMO: http://jsfiddle.net/dWjPQ/1/

Answer 2

Enabling the answer was correct .. for browsers other than Firefox (at least 13.0).

For people who have the same problem:

In the universal selector ( * ), you should use -moz-user-select: -moz-none; instead of -moz-user-select: none; . This will fix the problem.