How TO – Hide Arrows From Input Number
Learn how to remove arrows/spinners from input type number with CSS.
Try to hover over both number inputs to see the difference:
Hidden arrows:
Default:
Notes on functionality: It is still possible to increment the number when you scroll inside the number input.
Remove Arrows/Spinners
Example
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<h2>Hide Input Number Arrows</h2>
<p><strong>Note:</strong> It is still possible to increment the number when you scroll inside the number input.</p>
<input type=”number” value=”5″>
</body>
</html>