How to hide arrows from input type number?
January 27, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To remove arrows from number input, use -webkit-appearance as none and -moz-appearance as textfield it will make number input without arrows and work in all the latest browser ( chrome, opera, Mozilla firefox, edge, and safari ).
In this article, we will see an example remove arrows from input type number using CSS in HTML, bootstrap, and angular.
Let’s start the tutorial Example of disable arrows from input number
Looking for an example of hide input type number in react, react mui, and react antd read the below post.
Hide arrows from input type number in react, react mui, and react antd
hide arrows of input number in HTML
In this example, we create an input type=number and add remove arrows css in the style tag to remove up and down arrows from the input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<h1>hide arrows of input number in html</h1>
<input type="number" placeholder="Number" />
</body>
</html>Here is the output of the above HTML code to create an input number without arrows.
Try the below codesandbox link to customize the above example as per your requirements.
hide arrows of input number in bootstrap
Here, we will create number input using the bootstrap class and use remove arrows css to remove arrows from bootstrap number input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<style>
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<form style="margin: 20px;">
<div class="form-group">
<label for="exampleInputEmail1">Age</label>
<input
type="number"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter Age"
style="width: 20%;"
/>
</div>
</form>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>Here is the output of the above bootstrap code to create an input number without arrows.
Try the below codesandbox link to customize the above example as per your requirements.
hide arrows of input number in angular
Here, first, we will create a number input in the app.component.html file and add remove arrows css in the styles.css file to remove arrows from the input type number in angular.
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div>
<h3>
Hide input numbers arrows in angular
</h3>
<div>
<label for="name">
Age
</label>
<input id="name" type="number" formControlName="name" />
</div>
</div>Here, the styles.css file changes.
styles.css
/* You can add global styles to this file, and also import other style files */
/* Works for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Works for Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
html,
body {
font-family: sans-serif;
}Here is the output of the above angular code to create an input number without arrows.
Try the below codesandbox link to customize the above example as per your requirement.
All the best 👍