To make a div unselectable

<div id='test'>Cannot Select this</div>

#test {
   -webkit-user-select: none;
}

is used.

Is there a way to make a div selectable in case it is already unselectable, without actually removing the unselectable property. Something that forces select.

To make a div unselectable

<div id='test'>Cannot Select this</div>

#test {
   -webkit-user-select: none;
}

is used.

Is there a way to make a div selectable in case it is already unselectable, without actually removing the unselectable property. Something that forces select.

• javascript
• css

• Did you try using classes with javascirpt? – Alex Shilman Commented Jan 2, 2014 at 22:15

2 Answers 2

Put -webkit-user-select: initial on the child element.

Here's a working jsfiddle.

.outer {
  -webkit-user-select: none;
}

.inner {
  -webkit-user-select: initial;
}

<div class="outer">
  Unselectable

  <div class="inner">
    Selectable
  </div>

  Unselectable
</div>

Use classes to apply behavior/styles that are to be added/removed dynamically:

<div id="test" class="unselectable">Cannot Select this</div>

.unselectable{
   -webkit-user-select: none;
}

And in your script:

$('#test').addClass('unselectable'); 

Or

$('#test').removeClass('unselectable');