html5 spin,css - Styling HTML5 number input (spin box) in Chrome - Stack Overflow

There are ways to accomplish that. Here's a pure CSS solution:

http://jsfiddle.net/Volker_E/WwfW9/

As you can see, the magic CSS property/value in your case is -webkit-appearance: none;.

Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.

/* Spin Buttons modified */

input[type="number"].mod::-webkit-outer-spin-button,

input[type="number"].mod::-webkit-inner-spin-button {

-webkit-appearance: none;

background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;

position: absolute;

top: 0;

right: 0;

bottom: 0;

width: 1em;

border-left: 1px solid #bbb;

opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */

}

I've added a Data URI image as background (therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.

Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hover and :focus styles on a single button.

That's simply not possible with current implementation in Chrome.

Have fun!

Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to @dtracers