Resolved: disable selection of text except for one class

Question:

I have a website on which I have made all text non selectable except for input and textareas using the following line of CSS:

*:not(input, textarea) { -webkit-touch-callout:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }

I’d like to add a class so I can add certain texts to also be selectable. I thought adding “.selectable” to the selector would be enough, but somehow this doesn’t work. Should it?

Answer:

You need to create a separate rule for .selectable class to make it select text.

*:not(input, textarea) {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.selectable{
  -webkit-touch-callout: default;
  user-select: text;
}

<div>In this block, only <span class="selectable">this</span> is selectable. </div>

If you have better answer, please add a comment about this, thank you!

Resolved: disable selection of text except for one class

Resolved: Openlayers: Update clusters depending on filter (geometryFunction)

Resolved: Getting ‘502 Bad Gateway’ while deploying Springboot app in EKS

Resolved: Why is NGINX’s $request_uri empty?

Leave A Reply