Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to hide number input spin box using CSS?
To hide number input spin box using CSS, we will be discussing two different approaches in this article. The number input spin box is a commonly used component in web forms allowing users to increase or decrease numeric values with up and down arrows.
In this article, we are having a number type input spin box, our task is to hide number input spin box using CSS.
Syntax
/* Method 1: Using display property */
::-webkit-inner-spin-button {
display: none;
}
/* Method 2: Using appearance property */
::-webkit-inner-spin-button {
appearance: none;
}
Method 1: Using display Property
To hide number input spin box using CSS, we can use the CSS display property. We target the ::-webkit-inner-spin-button pseudo element selector which selects and styles the inner part of spin button, then set display: none to completely hide it
Example
Here is a complete example code implementing above mentioned steps to hide number input spin box using CSS display property
<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-inner-spin-button {
display: none;
}
input[type="number"] {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
width: 200px;
}
</style>
</head>
<body>
<h3>Hide Number Input Spin Box using Display Property</h3>
<p>Enter a number (notice no spin buttons appear):</p>
<input type="number" placeholder="Enter a number...">
</body>
</html>
A number input field appears without spin buttons. Users can still type numbers but cannot use up/down arrows to increment/decrement values.
Method 2: Using appearance Property
In this approach to hide number input spin box using CSS we use the CSS appearance property. We target the ::-webkit-inner-spin-button pseudo element selector and set appearance: none to remove the default browser styling
Example
Here is a complete example code implementing above mentioned steps to hide number input spin box using CSS appearance property
<!DOCTYPE html>
<html>
<head>
<style>
::-webkit-inner-spin-button {
appearance: none;
}
input[type="number"] {
padding: 10px;
border: 2px solid #4CAF50;
border-radius: 4px;
font-size: 16px;
width: 200px;
}
</style>
</head>
<body>
<h3>Hide Number Input Spin Box using Appearance Property</h3>
<p>Enter a number (spin buttons are hidden):</p>
<input type="number" placeholder="Enter a number...">
</body>
</html>
A number input field with green border appears without spin buttons. The appearance property removes the default browser styling of the spin buttons.
Browser Support
Note that the ::-webkit-inner-spin-button pseudo-element is specific to WebKit-based browsers (Chrome, Safari, Edge). For Firefox, you can use the following additional CSS
input[type="number"] {
-moz-appearance: textfield;
}
Conclusion
Both methods effectively hide number input spin boxes using CSS. The display: none method completely removes the element, while appearance: none removes the default styling. Choose based on your design requirements and browser compatibility needs.
4K+ Views
