HTML — Input number custom arrows

input-number-arrows.html

<!--
https://stackoverflow.com/questions/45396280/customizing-increment-arrows-on-input-of-type-number-using-css
https://www.w3schools.com/jsref/met_number_stepup.asp
-->

<link media="all" rel="stylesheet" href="./style.css">

<div>
  <button type="button" onclick="this.parentNode.querySelector('[type=number]').stepDown();">
    -
  </button>

  <input type="number" name="number" min="0" max="100" value="0">

  <button type="button" onclick="this.parentNode.querySelector('[type=number]').stepUp();">
    +
  </button>
</div>

style.css

input {
  text-align:center;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}