CSS ::-webkit-inner-spin-button Pseudo-Element

The ::-webkit-inner-spin-button pseudo-element is a non-standard CSS extension used to target the spinner buttons inside certain form controls, particularly HTML <input type="number"> elements. It is commonly used to hide the increment and decrement buttons displayed by browsers.

Syntax

input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
}

The pseudo-element is appended to a selector targeting a number input. The CSS declarations affect the internal spinner control in browsers that recognize this selector.

The -webkit- prefix identifies a browser-specific implementation detail rather than a standardized CSS pseudo-element.

How It Works

An HTML <input type="number"> element allows users to enter numeric values. Many desktop browsers display small arrow buttons inside the input field for increasing or decreasing the value.

These buttons are commonly called spinner buttons or stepper controls.

The ::-webkit-inner-spin-button pseudo-element targets the internal spinner control in supported browsers. Developers can use it to suppress the native spinner appearance or attempt limited visual customization.

Because the spinner is part of a browser-controlled form element, not every CSS property is guaranteed to affect its appearance.

Number Input Spinner Buttons

Number inputs can use several HTML attributes to control their permitted values and stepping behavior.

min - Specifies the minimum permitted value.
max - Specifies the maximum permitted value.
step - Specifies the interval used when increasing or decreasing the value.
value - Specifies the initial value.

For example, the following input starts at 5 and changes in increments of 1.

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" min="1" max="20" step="1" value="5">

When spinner buttons are displayed, users can click them to change the value according to the input's stepping rules.

Removing the spinner buttons visually does not remove the input's numeric validation or its underlying stepping behavior.

Hiding Spinner Buttons

One common use of ::-webkit-inner-spin-button is removing the visible spinner buttons from number inputs.

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

The -webkit-appearance: none declaration suppresses the native spinner appearance in browsers that support this technique.

The ::-webkit-outer-spin-button selector is included because some WebKit-based implementations expose an additional spinner-related internal part.

The margin: 0 declaration helps remove spacing associated with these controls.

This approach changes the visual presentation of the input but does not convert it into a text input or disable numeric validation.

Example

The following example creates a number input without visible spinner buttons in supported browsers.

HTML:

<label for="items">Number of items:</label>
<input type="number" id="items" min="1" max="50" value="10">

CSS:

input[type="number"] {
  width: 120px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 16px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

In supported browsers, the input displays as a numeric entry field without the usual increment and decrement buttons.

Users can still type a number, and the min and max attributes continue to define the permitted range.

The exact appearance may vary between browsers and operating systems.

Cross-Browser Styling

Browser engines do not provide one standardized pseudo-element for styling number input spinner buttons.

Chrome, Edge, and Safari recognize WebKit-prefixed spinner selectors, while Firefox uses different native form control styling.

To hide spinner buttons in both browser families, the following CSS combines WebKit-specific selectors with Firefox's historical textfield appearance value.

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

The first rule targets spinner controls in WebKit and Blink implementations. The second requests a text-field appearance for number inputs in Firefox.

These are browser-specific techniques, and their behavior may change as browser implementations evolve.

For most forms, retaining the native number input appearance is preferable unless the design requires the spinner buttons to be hidden.

Accessibility Considerations

Spinner buttons provide a convenient way to adjust numeric values without typing. Hiding them removes a visible interaction method, particularly for users who rely on mouse or touch input.

Keep the native <input type="number"> element so its numeric semantics and validation remain available.
Provide a visible <label> describing the input.
Make sure users can enter and change values using the keyboard.
Preserve a visible focus indicator.
Consider keeping the spinner buttons when users frequently adjust values in small increments.

For keyboard focus, the following CSS provides a visible outline.

input[type="number"]:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

Hiding spinner buttons does not automatically remove keyboard stepping behavior, but the available interactions should be tested in the target browsers.

Browser Support

::-webkit-inner-spin-button is a non-standard browser-specific pseudo-element recognized by WebKit and Blink implementations, including Safari, Chrome, and Edge.

Firefox does not provide the same WebKit-specific spinner customization behavior. Its native number input appearance can be adjusted separately using CSS appearance properties.

The HTML <input type="number"> element itself is widely supported, but the presence and appearance of spinner buttons vary by browser and platform.

For current compatibility information, visit Can I Use? and search for CSS appearance or HTML number input support.

Specifications

::-webkit-inner-spin-button is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

The HTML number input control is defined in the WHATWG HTML Living Standard .