← All elements
<input class="nm" type="number" value="3" min="0" max="10" aria-label="Quantity">About this layout
A number field whose browser spin buttons are restyled into a neat stacked pair using the inner-spin-button pseudo-element.
How it works
A number input has built-in spin buttons. The ::-webkit-inner-spin-button pseudo-element makes them always visible with opacity 1, gives them a bigger size and rounded corners, and a hue-rotate filter shifts their colour toward the teal theme. The field itself gets padding, border and a large font.
Ways to customise it
- Change the hue-rotate value to recolour the arrows.
- Edit the width and font-size on .nm.
- Add min, max and step attributes to control the allowed values.
Good to know
This styles the WebKit spin buttons only, so Firefox shows its own. Typing and the arrow keys keep working. For a custom plus and minus design you need extra buttons and script.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.