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

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" />