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

Share Improve this question Follow edited Mar 16, 2023 at 17:13 Ben Racicot 5,9791616 gold badges8282 silver badges139139 bronze badges asked Jan 2, 2014 at 22:11 user544079user544079 16.6k4242 gold badges120120 silver badges172172 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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');