How to disable user selection on disabled input box

Question

I'm trying to disable user selection on a input box which is disabled.

I have used pointer-events:none css property to prevent selection on input box

It is working fine if I apply the css to an input box which is not disabled.

But for some reason it is not working to the input box which is disabled. Please take a look at the code below

<input type="text" disabled value="do not select" style="pointer-events: none;"/>

Tried user-select:none even this didn't work.

Edit: Pointer-events:none is working fine in firefox, but it is not working in chrome.

What're you trying to achieve? It's not clear in your question. What do you mean by "prevent selection on input box" then? — Terry, Jun 14 '20 at 14:26
I'll be showing some text inside a text box and disable the input box based on the my clients requirement. As it is some sensitive content I was asked to prevent selection on it so that no one can copy the text. — Harish, Jun 14 '20 at 14:28
@Harish could you include browsers affected? It seems that text in disabled input field with both pointer-events:none and user-select: none remains selectable in Chrome only. — myf, Jun 14 '20 at 15:15
Oh I didn't notice this. pointer-events:none is working fine in firefox. Only in chrome I'm facing this issue. @myf — Harish, Jun 17 '20 at 07:58
It seems it is really a Chrome bug: currently setting `pointer-events:none` on *enabled* input prevents mouse selection, but has no effect on *disabled* - truly amusing, maybe even worth reporting. (There is interesting info in https://stackoverflow.com/a/40356009/540955 btw.) — myf, Jun 17 '20 at 14:08

score 0 · Answer 1 · answered Jun 14 '20 at 14:28

0

You don't need to write style="pointer-events: none;" specifically, disabled does the job for you. As it's disabled all the selection related properties are disabled due the disabled attribute. I think removing style="pointer-events: none;" is gonna solve your purpose.

answered Jun 14 '20 at 14:28

A K

163
1
1
12

I might be wrong, I just analyzed your question and share my thoughts. – A K Jun 14 '20 at 14:28
2

just an input box with disabled attribute doesn't prevent selection on it. – Harish Jun 14 '20 at 14:29

PaoloJ42 · Answer 2 · 2020-06-14T15:26:42.357

0

Ok, my previous answer didn't work, I also tryed

<input id="my_input" type="text" value="Try to select me!" disabled unselectable="on" onselectstart="return false;" onmousedown="return false;"/>

But this doesn't work for disabled fields as well, perhaps you could just set it to readonly?

I think that you should try using user-select: none, more about it here.
I'd comment this but I still don't have enough reputation.

edited Jun 14 '20 at 15:26

answered Jun 14 '20 at 14:31

PaoloJ42

115
9

1

Even that property didn't work on disabled input box – Harish Jun 14 '20 at 14:59

score 0 · Answer 3 · answered Jun 14 '20 at 15:47

We can use a little CSS trick with covering the :disabled with another transparent element.

onselectstart = (e) => {e.preventDefault()} // total page select disabling, just to make sure

.input-cover {
  position: relative; 
}
.for-disabled {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
input:disabled + .for-disabled{
  display: block;
}

<div class="input-cover">
  <input type="text" disabled value="do not select" />
  <div class="for-disabled"></div>
</div>
<br>
<div class="input-cover">
  <input type="text" value="select please" />
  <div class="for-disabled"></div>
</div>

How to disable user selection on disabled input box

3 Answers3