0

I have a basic form input for a number. The form works. The field will not accept letters being type into it. But the increment arrows that usually show up for type="number" aren't showing up. What am I missing?

<div>
<input 
  type="number" 
  id="cost" 
  className="form-field" 
  placeholder="Cost"
  min="0"
  onChange={handleChange}
  value={hats.cost}/>
</div>
CodeMonkey
  • 123
  • 7
  • Did this answer your question, [Show Up Down arrow in input](https://stackoverflow.com/questions/25194631/is-it-possible-to-always-show-up-down-arrows-for-input-number) – Sakil Aug 29 '22 at 04:42
  • I put your code in codepen and it is working fine. It should be Interference with other library! for example some css code that can remove arrow like: `::-webkit-outer-spin-button`. – Saleh Aug 29 '22 at 04:44
  • No. I've tried input[type=number]::-webkit-inner-spin-button { opacity: 1 } but still no luck. I'm seeing that this could be a browser thing, but I'm using Chrome and I know I've done projects with them in Chrome before. – CodeMonkey Aug 29 '22 at 04:46
  • `` This will work with chrome atleat – Vinoth .R Aug 29 '22 at 04:47
  • @Vinoth.R I've seen that but it's just not working for me. ¯\_(ツ)_/¯ – CodeMonkey Aug 29 '22 at 04:49
  • Did you try hovering over the input field? (I know this question is absurd but just want to double check ) – Vinoth .R Aug 29 '22 at 04:51
  • I did, yes. I've tried adding/eliminating the placeholder and step, too. I'm just so stumped because I've never had this happen. – CodeMonkey Aug 29 '22 at 04:57

0 Answers0