How to hide up & down arrow from input number in HTML5

Dung Do Tien Jan 22 2021 50

Hello all,

 I'm building a template for my project by using HTML5, CSS3 and bootstrap also

When I use input type=number, It always shows 2 arrows at the end of the element 

  <input type="number" name="quantity" id="quantity" /> 

I use Google Chrome to show the UI

I don't wanna show 2 arrows of all input type=number tag

How can I hide them?

Have 1 answer(s) found.
  • HTML5 hasn't provided any attribute to hide the error of input type number

    You must use CSS to hide it

    You can copy some lines of code below to the global CSS file. It will help you hide all arrows of input type = number

     input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    If you need more information about 2  pseudo-element above you can go here to get more detail 

    Dũng Đô La Jan 10 2021
Leave An Answer
* NOTE: You need Login before leave an answer

* Type maximum 2000 characters.

* All comments have to wait approved before display.

* Please polite comment and respect questions and answers of others.

Popular Tips

X Close