Skip to content

Instantly share code, notes, and snippets.

@w-jerome

w-jerome/input-number-arrows.html

Last active July 11, 2024 21:16
Show Gist options
  • Save w-jerome/a68c7d64533a7e9e9f735be899b7c209 to your computer and use it in GitHub Desktop.
Save w-jerome/a68c7d64533a7e9e9f735be899b7c209 to your computer and use it in GitHub Desktop.
Download ZIP
HTML — Input number custom arrows
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment