css - Is there a way to stop manual input in a type=number but still allow changes with the "up/down" buttons?

Question

I have an input:

<input type="number" name="amount" min="4" max="6" step="2" value="4" id="amount" />

And I don't have a normal submit button to submit the info (uses javascript).

type=number works fine, but users can still type in any number they want, I would like to stop users from being able to type in the input, but still allow for changes using the "up/down" arrows that appear with type=number. I have tried researching but cannot find anything. Is this even possible?

Answer 1

Is there any reason you are avoiding using a drop down select tag? This will give the user a very limited choice of numbers (set to your preference). You could even populate the <option> fields with numbers 1 through 100 (or whatever you choose) using PHP or JavaScript so you didn't have to manually type each number in the HTML code.

<select>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>