Number Input - Always Show Spin Buttons

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

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.

How to always display numerical input spinners on mobile and iPad

At some point it's hard and tricky to get a consistent result across the platforms for a native element like an input. For this reason, I would recommend you to re-create one that 'fake' the native behaviour by using some javascript. Here is a very basic example:

const input = document.querySelector('input[type=number]')

const increment = () => {
  input.value = Number(input.value) + 1
}
const decrement = () => {
  input.value = Number(input.value) - 1
}

document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input {
  position: relative;
  width: fit-content;
}

input {
  width: 60px;
}

.spinners {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 1px;
  transform: translateY(-50%);
}

.spinner {
  font-size: 7px;
  border: none;
  padding: 0 1px;
}

.spinner:hover {
  background: lightgrey;
}

<div class="number-input">
  <input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
  <div class="spinners">
    <button class="spinner increment">▲</button>
    <button class="spinner decrement">▼</button>
  </div>
</div>

number input - always show spin buttons

You can target spin buttons using ::-webkit-inner/outer-spin-button and than just set opacity to 1 (spins are always there, but in default they have opacity: 0).

Code:

<style>  

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

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

Fiddle:
http://jsfiddle.net/dk8fj/

html number input field always display spinner?

It is not possible to do this with the Browser specific style.
You would need to either build that functionality yourself using some Javascript or look for a premade script on the interwebs.

You can only hide those Shadow DOM elements as they trigger very browserspecific css-attributes to provide the functionalitys like onclick or onhover.

See: http://css-infos.net/property/-webkit-appearance (You could trigger another behaviour for your Input-Field, but you cant force it to be always visible)

Restore input type=number spinners in chrome

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

Make HTML5 number input’s spin box always visible on chrome just like mozilla?

jsFiddle

input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {opacity: 1 !important;}

<input class="FlaggingPeriodTextBox" style=" width: 61px;    text-align: right;font-family: Segoe UI;margin-top: 9px;" type="number" min="1" max="999" value="7">

Can I hide the HTML5 number input’s spin box?

This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {    /* display: none; <- Crashes Chrome on hover */    -webkit-appearance: none;    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */}
input[type=number] {    -moz-appearance:textfield; /* Firefox */}

<input type="number" step="0.01" />

How to always show the increment arrows in a matInput of type number?

This has to do with the browser as this isn't shown when using Firefox. You can add this css to fix the issue in Chrome.

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