Increase numbers but not letters in HTML input

Question

I have this problem where I want to have an input that can take both numbers and letters. I want to be able to increase and decrease the numbers only but keep letters unchanged and also the user can't delete the letters. Like the following picture:

input with numbers and letters only:

I had a workaround, by putting <span>mm</span> next to numbers using position: absolute;.

Is there any better way to do it?

Answer 1

you could do something like this:

div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'mm';
}

<div class="ms">
  <input type="number" id="milliseconds" />
</div>