Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Chrome input type="number" CSS styling

Javascript Web Development Front End Scripts

Chrome provides special CSS pseudo-elements to style the spinner arrows in input type="number" fields. You can hide them completely or customize their appearance.

Hiding the Number Input Spinner

To completely remove the spinner arrows from number inputs:

<!DOCTYPE html>
<html>
<head>
    <style>
        input[type=number]::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type=number] {
            padding: 8px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <label>Number without spinner:</label>
    <input type="number" value="42" id="noSpinner">
</body>
</html>

Showing and Styling the Spinner

To make the spinner visible and customize it:

<!DOCTYPE html>
<html>
<head>
    <style>
        input[type=number]::-webkit-inner-spin-button {
            opacity: 1;
            width: 20px;
            height: 30px;
            cursor: pointer;
        }
        
        input[type=number]::-webkit-outer-spin-button {
            opacity: 1;
        }
        
        .styled-number {
            padding: 10px;
            font-size: 18px;
            border: 2px solid #007bff;
            border-radius: 6px;
            width: 150px;
        }
    </style>
</head>
<body>
    <label>Styled number input:</label>
    <input type="number" value="100" class="styled-number">
</body>
</html>

Cross-Browser Compatibility

For Firefox compatibility, you may also need:

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Chrome, Safari */
    margin: 0;
}

Comparison

CSS Property Purpose Browser
-webkit-appearance: none Hide spinner Chrome, Safari
opacity: 1 Show spinner Chrome, Safari
-moz-appearance: textfield Hide spinner Firefox

Conclusion

Use -webkit-appearance: none to hide number input spinners in Chrome. Set opacity: 1 to show and style them. Include Firefox-specific rules for cross-browser compatibility.

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements