3

I have an application which theme is based on Metro UI CSS which hides the (I think) nice and usefull spinners Chrome adds when using <input type="number" />.

I am trying to "override" this rule, but I can't figure out what value I have to set it to:

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: initial !important;
}

Does not work (see FIDDLE).

What is the correct value to restore them?

P.S.: I am trying to avoid just removing the rule from the base CSS to avoid update problems...

Christoph Fink
  • 22,727
  • 9
  • 68
  • 113
  • Does this answer your question? [How to always display numerical input spinners on mobile and iPad](https://stackoverflow.com/questions/67091659/how-to-always-display-numerical-input-spinners-on-mobile-and-ipad) – Pietro Oct 14 '21 at 12:52

4 Answers4

12

Set -webkit-appearance to inner-spin-button, the default value for the buttons.

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
}
quw
  • 2,844
  • 1
  • 26
  • 35
  • 1
    That was it, thanks. Can you may also tell me where/how you found this information, as I searched a long time and did not find this values? – Christoph Fink Aug 20 '14 at 17:37
  • 5
    Sure. Open the Chrome Developer Tools, and click the gear in the top right corner. Under General|Elements, there is an option to "Show user agent shadow DOM". Enable that, then inspect the input element. Expand the element and the `#shadow-root (user-agent)` sub-element. Find the shadow element that you want to style, and look at the grayed out styles in the style pane. [picture](http://i.imgur.com/TlNwUQF.png) – quw Aug 20 '14 at 17:42
  • GREAT - thanks again. That "feature" in the dev-tools I also searched for already ;-)... – Christoph Fink Aug 20 '14 at 17:48
  • 2
    Where are you my friend? I just spend a full day trying to figure this one out. I need to kiss you if we meet in real life. Thank you so much! – Henrik Petterson Sep 13 '16 at 15:48
3

Additionally I needed the spinner hiding (as per the default) or always showing, so here is the way to do all three. Strangely difficult to get this information.

/* disable globally if required */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* restore to hidden until mouse over */
.show_spinner input[type='number']::-webkit-outer-spin-button,
.show_spinner input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: inner-spin-button;
}

/* restore and show permanently */
.show_always input[type='number']::-webkit-outer-spin-button,
.show_always input[type='number']::-webkit-inner-spin-button {
   -webkit-appearance: inner-spin-button;
   opacity: 1;
   margin-left: 10px;
}
<!-- disabled spinners -->
<input type="number">

<!-- restore to hidden until mouse over -->
<div class="show_spinner">
    <input type="number" class="show_spin">
</div>

<!-- restore and show permanently -->
<div class="show_always">
    <input type="number" class="show_spin">
</div>
ChrisAdmin
  • 982
  • 1
  • 12
  • 32
2

Tested on Chrome v67.0.3396.87:

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    /*-webkit-appearance: inner-spin-button !important;*/
    opacity: 1;
    margin-left: 5px;
}
<input type="number"/>

Changing the -webkit-appearance property did not appear to have any impact; it did not show the spinners except when hovering, which is the default behavior anyway.

Changing the opacity worked as expected. The spinners are always visible, when hovering or not. Credit for this trick goes to https://codepen.io/BJack/pen/FHgtc

OXiGEN
  • 2,041
  • 25
  • 19
1

I tried so hard to restore arrows form mobile browsers like mobile chrome but the following code was not working

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    /*-webkit-appearance: inner-spin-button !important;*/
    opacity: 1;
    margin-left: 5px;
}

and eventually I decided to make some side buttons. I made the code and you can add as many buttons as you want. I invite you to look at the snippet on this other similar post.

Improved In this snippet I have added autoincrement when the user keep the button pressed

https://stackoverflow.com/a/70957862/13795525

Initial https://stackoverflow.com/a/68679616/13795525

Pietro
  • 127
  • 6
  • Next time instead of referring to an other SO post in your answer, flag the question as duplicate – Vega Oct 13 '21 at 01:57
  • Ok I did it even if it would be the other SO question that is a duplicate of this one as the other post was asked more recently. – Pietro Oct 14 '21 at 12:54
  • Thanks. The rule of thumb is that the question that is better phrased or has more comprehensive answer(s) would be the target, regardless of the time. – Vega Oct 14 '21 at 13:04