Remove arrows from input type number.

admin December 28, 2022September 1, 2023

Remove up or down arrow (spinners) from input type=”number”

In field by default the up and down arrows are appear on the right side of the input box, these are called spinners. Hide the spin arrow from input type number. These spinners can be easily hide using CSS properties.

Hide arrows in input type number — Image caption goes here

The input type is a form element that is new in HTML5. By default, browsers add up/down arrows to help the user step though numbers which increased or decreased the current value of the input using arrow up or arrow down key.

HTML

<input type="number" placeholder="Enter Your Number">

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;
}

You can also style the buttons to your requirement, by using :before and :after

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
    font-family:monospace;
    line-height:
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

Remove spinners from input type number.

In this tutorial we learn that how to hide up and down arrows using CSS properties.

Learn HTML/CSS from W3 School Website

HTML/CSS