Question

I have website, where I first set

::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;
 }

( Just for the artistic effect, not because I’d be trying to prevent people from copying something. )

But then, later on, I want the user to be able to select text from a textarea..

I was able to make the selection visible again, with

#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 textarea, it cannot be unselected by clicking somewhere. You can only unselect the text by moving the caret ( with arrow keys ).

Why is that? And how can I prevent this?

Answer 1

Change

#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/