Is it possible to always show up/down arrows for input "number"?

Question

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";

}

Tovatovar

Possible duplicate of number input - always show spin buttons – Idleman

Did you find the solution? It doesn't work in my case. – Cadmann

what browser are you using? it works in Chrome – Tovatovar

Answer 1

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.

Walleyed

as @NewBeeee said: In firefox and safari, its a default feature to show it always (#24287006) – Amati

Answer 2

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

Ostracism

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

Answer 3

I tried this and it's working

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

Undermost

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

Answer 4

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();

Failure

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 – Tovatovar

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 – Tovatovar

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 – Sonasonant

Answer 5

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>

Merv