How to hide number input spin box using CSS ? Last Updated : 17 Jun, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to hide the number input's spin box in HTML5. The Spinbox or Spinner in HTML allows to increase or decrease the input number with the help of up-arrow & down-arrow, placed within the box, whose value defines in a range of real numbers. The spin box facilitates selecting or inputting a wide range of real numbers, which is mainly utilized to insert the number in HTML. It generally appears when the value of the <input> type is selected as a number, tel, & similar other cases. There are various CSS properties & extensions that can be implemented to hide the input's spin box, which is discussed below: ::-webkit-inner-spin-button: It is a CSS pseudo-element that is implemented to the spinner button of the number picker <input> element, in order to add the styling properties to the inner portion.::-webkit-outer-spin-button: It is a CSS pseudo-element that is utilized to implement the outer portion of the spinner button.Approach: For webkit browsers (Chrome & Safari): In these browsers, the default value of the -webkit-appearance property is textfield. To remove input's spin box, the -webkit-appearance property on the ::-webkit-outer-spin-button, ::-webkit-inner-spin-button pseudo-classes must be set to none which is inner-spin-button by default.For moz browsers (Firefox): In these browsers, the default value of the -moz-appearance property is number-input, and in order to remove input's spin box you need to set it to textfield.Example: The example code demonstrates how to practice the above properties and remove the HTML5 number input's spin box. HTML <!DOCTYPE html> <html> <head> <style> /* For Chrome and Safari */ input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* For Firefox */ input[type="number"] { -moz-appearance: textfield; } </style> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3> HTML5 number input without a spin box. </h3> <input type="number" /> </center> </body> </html> Output: A HTML5 number input without its default spin box. Comment More infoAdvertise with us Next Article How to force Input field to enter numbers only using JavaScript ? C chiragchouhan163 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How to hide the insertion caret in a webpage using CSS ? Insertion caret or text input cursor generally refers to a flashing, thin vertical line. It functions in an input field to indicate where the next character typed will be inserted. If you wish to hide this input cursor from input fields in your webpage, the caret-color property of CSS is used. It ha 1 min read How to create a Number Input using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops In this article, we will be creating a number input area using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†h 1 min read How to Hide Option in Select Menu with CSS ? In HTML, the <select> tag creates a dropdown menu for user selection. Hiding certain options with CSS allows them to remain in the code but be invisible to users. This technique is useful for conditional display or future reactivation without code changes.Syntaxselect option[value="value-to-hi 2 min read How to create Label hidden in Input Area using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Label hidden using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href= 1 min read How to force Input field to enter numbers only using JavaScript ? We are going to learn how can we force the Input field to enter numbers only using JavaScript. Below are the approaches to force input field force numbers using JavaScript:Table of ContentBy using ASCII ValueBy using replace(), isNan() functionBy using ASCII ValueIn this approach, we are going to us 3 min read How to Remove Arrows from Number Input? The arrows in a number input box, known as spinners, allow users to increment or decrease the value using up and down arrows. While these arrows can be useful in some cases, there are situations where you may want to remove them for a cleaner or more customized design. Below we'll explore two common 2 min read Like