CODEWITHSUNDEEP
csswordpressselection
UltrasoundJelly
UltrasoundJelly

Reputation: 1900

make text in div selectable, but make parent div unselectable (wordpress)

I am trying to create a results text box containing text that the user will be expected to select and copy. I cannot use textarea because I need the text to support html markup. I have three nested divs with the following classes: entry-content, content-area, and selectme. I would like the user to be able to select only the innermost div selectme, and not have the selection area extend to the two parent divs. The following code seems to work fine on this JSfiddle, but when I apply the same css to my wordpress page I'm not getting the same effect. Thoughts?

.entry-content {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.site-main {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.selectme {
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
 }

Upvotes: 2

Views: 1543

Answers (1)

misterManSam
misterManSam

Reputation: 24702

Prevent the ugly selection with display: inline-block

To prevent coloring outside the box when highlighting, use display: inline-block on your editable container. The selection will only apply to the divs text.

.content-area {
  width: 300px;
  height: 300px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 2px;
  margin: 0 auto;
}
.selectme {
  width: 150px;
  height: 150px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 2px;
  display: inline-block; /*add*/
}
<div class="entry-content">
  <div class="content-area">

    <div class="selectme">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac est risus. Nunc quis viverra lacus. Integer ut quam ac erat vulputate semper nec eget turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas facilisis posuere finibus. Aliquam ultrices ligula id pharetra tempus. Integer suscipit rutrum ex ut condimentum. Morbi non vulputate tellus, non euismod erat. Ut neque dui, pretium eu dolor in, rutrum viverra enim. Integer venenatis, neque et varius ultricies, lorem purus accumsan felis, sed egestas mauris lectus at massa. Morbi ut orci at est ultricies lacinia non sit amet eros. Pellentesque pulvinar metus ante, aliquam sollicitudin massa laoreet et.
    </div>
  </div>
</div>

Inconsistent behaviour of user-select

The user-select property is not a w3c standard and is applied inconsistently.

From the MDN (emphasis mine):

Non-standard

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

As an example of this unreliability, the user-select property on your website seems to work just fine for me in Chrome 39 on Windows :)

The none value does appear to have good support, but should not be relied upon:

Currently the user-select property does not appear in any W3C specification. Support information here is only for "none" value, not others.

Upvotes: 1

Related Questions