CSS 仅允许在元素内选择文本

Question

Here I am trying to achieve where user can select text within an element only, eg: textfield or textarea In these if we have text in textfield then its allowed only to select text within a textfield area, its wont select outer text.How can we do this in the case of div tag? any help will be appreciated.

<div>
    <div id="one"> some content will be here... </div>
    <div id="two"> text should be select from this div only.. </div>
</div>

Answer 1

Apply the style user-select: none on #one like this:

 #one { user-select: none; }

 <div> <div id="one"> some content will be here... </div> <div id="two"> text should be select from this div only.. </div> </div>

---

You can also put user-select: none on the parent and apply it back to specific children within the parent to make them selectable.

 .no-user-select { user-select: none; }.has-user-select { user-select: text; }

 <div class="no-user-select"> <div id="one"> some content will be here... </div> <div id="two" class="has-user-select"> text should be select from this div only.. </div> <div id="three"> cannot select from this child either </div> </div>