Can we hide the caret in a number field without disabling it

Question

I have a spinner - not a text field or a textarea

<input type="number" />

enter image description here

It would be nice to not have the blinking caret in the field when the control is clicked.

enter image description here

The answer to How to hide the caret in an HTML text input field?

does of course not work since the spinner does not run when the field is disabled or readonly.

Neither does Hide textfield blinking cursor which is not a spinner

Also jQuery UI spinner has the same issue

Under what conditions do you want the carat (cursor?) not to blink? — Beetroot-Beetroot, Jan 29 '13 at 10:24
I think you have to put up with it. For `type="number"`, focus/spinner/blink all come as a package. You could try `type="text"` with `pattern="[0-9]*"` but I think you will get the same issue. — Beetroot-Beetroot, Jan 29 '13 at 12:30
It's somewhat cumbersome but you could try the technique described [here](http://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor). — Beetroot-Beetroot, Jan 29 '13 at 12:44

score 1 · Answer 1 · answered Jan 29 '13 at 14:42

css:

.your-field{
    color: transparent;
}

add wrapper to the field with position: relative; and a span/div/whatever after the field with position: absolute.
position span correctly (it's top-left should overlap with input text start position)
add event handler on keyup/keydown/custom arrow click/any event that changes input val

handler function (jQuery):

function() { $('.your-absolute-positioned-element').text( $('.your-field').val() ); }

Thanks - I went with the complete example by Barney. – mplungjan Jan 29 '13 at 15:09 — mplungjan, Jan 29 '13 at 15:09

score 1 · Accepted Answer · answered Jan 29 '13 at 14:51

The blink is part of the native input representation - you'd have to hack it to A) make said input invisible and B) reproduce its content elsewhere.

A) I'd suggest using colour: transparent. If older browser support (I know old IEs won't like this) you can go for visibility: hidden or other techniques, but then addressing focus will be tough.

B) Create a wrapper around the input with position: relative, then a span immediately afterwards that will match the input value whenever it changes.

Here's a simple codepen example:

http://codepen.io/barneycarroll/pen/beFgm

It should be now — are you sure Javascript's enabled? – Barney Jan 29 '13 at 14:55 — Barney, Jan 29 '13 at 14:55

Can we hide the caret in a number field without disabling it

2 Answers2