How to Remove the Arrows From Input[type=”number”]
Whenever we take a form, we take input field in it and give [type = “number”] in it for number validation of the queue.
When a user comes to fill the form, only the number is typed, then [type = “number”] is given but by giving [type = “number”] these arrows come by default.
Today we will see how to remove the arrow.
We have given a code below, we will add it to your CSS File.
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
Here below is the example. how to add code.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Remove the Arrows From Input</title>
</head>
<body>
<style type="text/css">
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
</style>
<body>
<h1>How to Remove the Arrows From Input[type="number"]</h1>
<input type="number" name="number">
</body>
</html>
</body>
</html>
