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!

Community
  • 1
  • 1
Vael Victus
  • 3,966
  • 7
  • 34
  • 55

1 Answers1

14

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

Volker E.
  • 5,911
  • 11
  • 47
  • 64
  • 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. – slothbear Aug 15 '14 at 20:39
  • 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. – Volker E. Aug 15 '14 at 21:23
  • 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. – slothbear Aug 17 '14 at 03:46
  • 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. – slothbear Aug 17 '14 at 17:01
  • I do not see the buttons on Chrome v39 (I am on a mac Osx) – dtracers Jan 11 '15 at 03:35
  • @dtracers Seems like Google has changed the default styling to `opacity: 0;` and on `:hover`, `:focus` and `:active` Chrome's showing the spin buttons. You can influence by changing the default. My updated jsFiddle changes the default behavior. http://jsfiddle.net/Volker_E/WwfW9/296/ – Volker E. Jan 18 '15 at 00:57
  • 1
    It still is not working. http://s29.postimg.org/ua08smnkz/Screen_Shot_2015_01_17_at_8_07_56_PM.png?noCache=1421546946 this is what it looks like on my computer – dtracers Jan 18 '15 at 02:08
  • Even better than before, because buttons are aligned correctly, have a bit better UX (due to bigger interaction area) and grow with `padding/height` of the `input` field ;) http://jsfiddle.net/Volker_E/WwfW9/298/ Have also updated answer. Thanks for the input! – Volker E. Jan 18 '15 at 02:52
  • the only thing I succed in is to rotate the inner button. If there is no inner button I can't increment, it works as text field : input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } input[type="number"]::-webkit-inner-spin-button { transform: rotate(180deg); } – Lucile Fievet Jul 05 '18 at 14:45
  • @LucileFievet Not quite sure, I follow you, the JSFiddle is still showing all capabilities of overrides in latest Chrome… – Volker E. Jul 08 '18 at 21:27