113

I want to always show up/down arrows for input "number" field. Is this possible? So far I haven't had any luck...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS: 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}
Oneezy
  • 4,881
  • 7
  • 44
  • 73

5 Answers5

208

You can achieve this (in Chrome at least) by using the Opacity property:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

As stated above, this will likely only work in Chrome. So be careful using this code in the wild without a fallback for other browsers.

BJack
  • 2,404
  • 1
  • 13
  • 11
  • 3
    as @NewBeeee said: In firefox and safari, its a default feature to show it always (https://stackoverflow.com/questions/24286506/number-input-always-show-spin-buttons) – titusfx Oct 03 '17 at 11:02
19

I tried this and it worked 

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

Found Here

Atta H.
  • 661
  • 5
  • 11
  • is it possible to display the up and down number range option for input type="text". Because I am applying a regex pattern validation as: Validators.pattern(/^[1-9][0-9]{0,2}$/), to restrict the user to enter values between 1 to 999 only. And I am using input as text as this pattern is not working for input type=number, as the same pattern does allow the user to type 01 0999 etc values which start with 0, which is not correct, though this number type has the feature of min & max which displays up/down arrows by default. – bts_dev Dec 13 '21 at 20:03
3

If you're trying to get the same appearance across different browsers you may be forced to use a plugin/widget or build one yourself, the main browsers all seem to implement number spinners differently.

Try jQuery UI's spinner widget it offers a lot more versatility when it comes to styling.

Working Example

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();
apaul
  • 16,092
  • 8
  • 47
  • 82
  • I'm not trying to get the every browsers support, i just wanted to know if there was a css trick to allow them to always be viewable – Oneezy Aug 08 '14 at 02:52
  • My whole idea behind it was "degrade gracefully".. if browser doesn't support it will appear to be just a text box. . It they do they take on the appearance of the default number spinner, but not just on hover – Oneezy Aug 08 '14 at 17:12
  • Problem with JQuery UI is it has lots of conflicts with bootstrap. So if you are using bootstrap in your project then you will be in trouble – Dattatreya Kugve May 08 '18 at 09:31
2

I tried this and it's working

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}
Jakub Kurdziel
  • 3,216
  • 2
  • 12
  • 22
Munish Kumar
  • 21
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 28 '22 at 14:07
0

For me only additional CSS settings helps:

<style>
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button 
  {
    opacity: 1;
  }

  input[type=number]::-webkit-outer-spin-button, 
  input[type=number]::-webkit-inner-spin-button 
  {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
</style>
Intacto
  • 527
  • 3
  • 8