Styling HTML5 number input (spin box) in Chrome

问题

Chrome recently updated its input element styles. I really like the number input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.

I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number'] itself to these buttons:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons. Ideally I just want to remove their border-radius.

Interestingly, padding seems to work on these buttons. I know they're listening!

回答1:

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

来源：https://stackoverflow.com/questions/21266888/styling-html5-number-input-spin-box-in-chrome

标签

css

html5

google-chrome

inputbox