Combining HTML Number & Select Inputs

Question

This is what I've tried:

<input type="number select" value="12" step="12"></input>

I'm trying to acheive:

• an input with up/down arrow that moves between values of 12
• a dropdown on desktop and a select "spinner" on mobile (mobile safari) with the dropdown values also of 12 (eg., 12, 24, 36, 48, ect.)
• an input that can be typed into (typing in any value is fine for now, no error notification neccessary if the value is not a value of 12)
• all of this should be one HTML input that can be styled with CSS

Answer 1

To answer your first bullet point, you can use min, max, and step on the number input to get the up/down arrows to move between multiples of 12, like this:

<input type="number" min="12" max="5000" step="12">

To combine a dropdown/spinner and a number input, take a look at this question: Drop Down Menu/Text Field in one

The accepted answer should let you do what you need to do, although it takes a bit of coding. Another answer farther down suggests using <datalist>, which sort of works and is much simpler but behaves oddly after you enter a value into the input - the dropdown options disappear and you only see the current value as an option. If you're ok with that behavior and just want a simple solution, I recommend using something like below, but if you want something that works a little better, definitely take a look at the question linked above instead.

<input type="number" list="quantities" min="12" step="12">
<datalist id="quantities">
  <option value="12">
  <option value="24">
</datalist>

I didn't include all the options up to 5000, but you get the idea. I'm sure there's a way to fill in the options programmatically without typing them by hand, too - I would start by searching for "using an array as datalist options" or something if you're interested in doing that, although I've never done it myself. I imagine there's a way to create an array of options in JavaScript and pass it in.