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.

Answer 1

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.

Answer 2

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>