• Custom Printed T-shirts
  • Seo Expert
  • Bisen Infotech
  • Khaali Paper

Hide arrows in input type number

In <input type="number"> 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

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.