'Restore input type=number spinners in chrome

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...

htmlcssgoogle-chromemetro-ui-css


Solution 1:[1]

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

Solution 2:[2]

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>

Solution 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OXiGEN
Solution 2 ChrisAdmin
Solution 3

Related Questions