input

How to Remove the Arrows From Input

Spread the love

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>

Spread the love

Related Posts

Leave a Reply

Your email address will not be published.