14

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!

Improve this question
0

1 Answer 1

Reset to default
15

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

Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

I wonder if something has changed? When I view the jsFiddle, I see the default spin buttons – but the magic styled field has no buttons.
Which browser do you visit jsFiddle with? Both spin buttons are just visible on :hover and :active in the fiddle. In Chrome v36.0.1985.125 m it's same as before.
I'm using Chrome 36.0.1985.143. Is there any other environmental thing that could be affecting the display? It's a good avenue of investigation though. I saw the magic buttons on Safari 7.0.5 (9537.77.4). Thanks for reminding me to try another browser. Still, weird that I don't see Magic on Chrome.
I've tried the Magic on a couple of other computers – and I see the Magic on all those. I'll continue to investigate what might be different about my main Chrome installation. Thanks for your help. And the Magic.
It still is not working. s29.postimg.org/ua08smnkz/… this is what it looks like on my computer
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.