How to disable selection / highlighting of a HTML input element?

Question

How to prevent user-selection / highlighting of an <input>?

This:

input { 
  user-select: none;
}

<input type="number" value="123" />

and the methods from How to disable text selection highlighting and CSS disable text selection and don't work on an input.

Note: if possible, I don't want to put the input on disabled mode.

Answer 1

You can hide the selection like this:

input::selection {
    background-color:transparent;
}

The illusion will be broken if the user drags the text after selecting it, but I don't think there's any other way to do it.

(Why would you want to do this though)?

Answer 2

You could try to (almost instantly) remove the selection when someone selects something inside the input element with .getSelection().removeAllRanges();.

It is still possible to copy the text if someone is quick.

$("input").select(function() {
    window.getSelection().removeAllRanges();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

You can improve this by making it look like text is not selectable (see Samuel's answer), I added it into an extra code snippet:

$("input").select(function() {
        window.getSelection().removeAllRanges();
});

input::selection {
    background-color:transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" value="123">

After all of this you can also make it imposible for the user to copy anything inside an input field by adding onCopy="return false" to the input field. (It is still selectable but not possible to copy).

<input type="number" value="123" onselectstart="return false" oncopy="return false;" />

You might only want to use 1 or a combination of 2 of those things inside your project. Combine the things you need and you can make an unselectable/uncopy-able input field.

You can also disable cutting/pasting or right clicking according to this article.

Answer 3

Reading your requirements, it seems you'd probably fulfil them best by not using user-facing number input at all, or more precisely, progressively enhance it to some "ticker" structure.

Such progressively enhanced number input without possibility to select the value could be something like:

<form onsubmit="alert('Value is: ' + this.v.value); return false">
  <label for="o">Value: </label>
  <!-- Displays the value: -->
  <output id="o" for="plus minus"
    style="min-width: 2em;
      display: inline-block;
      text-align: right; border: 1px solid;
      padding-inline: .5em;
      user-select: none;
      /* user-select: none; is probably not necessary here anymore
         since keyboard input here does not affect the value
      */
">0</output>
  <!-- Holds actual value: -->
  <input name="v" type="hidden" value="0" onchange="o.value=value">
  <!-- Controls: -->
  <button id="plus" type="button" aria-label="Increase value"
  onclick="v.value=Number(v.value)+1;v.onchange()"
  >+</button>
  <button id="minus" type="button" aria-label="Decrease value"
  onclick="v.value=Number(v.value)-1;v.onchange()"
  >-</button>
  <hr>
  <input type="submit">
</form>

(Again, this structure is for demonstration only, underlying element should be regular number input. Both should work with screen readers and other assistive technologies, but haven't verified this one ATM.)

Answer 4

This seems to work, as a first approximation:

input { 
    pointer-events: none;
}

<input type="number" value="123" />

Answer 5

This works if you still want pointer events:

Vanilla

<style>
input::selection {
  background-color: transparent;
}
</style>

<input 
  type="number"
  oncopy="return false"
  oncut="return false"
  onpaste="return false"
/>

React with Styled Components

import styled from 'styled-components';

const ScInput = styled.input`
  &::selection {
    background-color: transparent;
  }
`;

const Input = () => (
  <Input
    onCopy={(e) => e.preventDefault()}
    onCut={(e) => e.preventDefault()}
    onPaste={(e) => e.preventDefault()}
  />
);

export default Input;

Disables copy/cut/paste functionality of an input and makes the selection transparent.