How to Always Show Up/Down Arrows for Input "Number"

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>

Arrows not working on input type=number

After so much of attempts removing JS CSS n all. Come to know that "ember-view" class was creating the issue. I was using ember and the div in which I was using input type="number" was having class "ember-view". Removing that class makes the textbox work good :). Thanks.
Earlier

<div class="ember-view">
<input type="number">
</div>

Now

<div>
<input type="number">
</div>

Making up down arrow of HTML's input number much bigger and cleaner

you can wrap a input in and element and style it

div {  display: inline-block;  position: Relative;  border: 2px solid grey;  border-radius: 10px;  overflow: hidden;  -webkit-touch-callout: none;  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}div:before,div:after {  background: white;  right: 0px;  width: 30px;  height: 20%;  position: absolute;  pointer-events: none;}div:before {  content: '';  bottom: 50%;  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;  background-size: 20px;  background-position: center;}div:after {  content: '';  top: 50%;  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;  background-size: 20px;  transform: rotate(180deg);  background-position: center;}input {  height: 80PX;  font-size: 50px;  outline: 0;  border: 0;}

<div>  <input type="number" value="10" /></div>

Customizing Increment Arrows on Input of Type Number Using CSS

tl;dr:

Having been asked in private about the following setup quite a few times, I decided to add a demo for it (Bootstrap 4 + jQuery + Font Awesome input-group setup):

$('.btn-plus, .btn-minus').on('click', function(e) {  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');  const input = $(e.target).closest('.input-group').find('input');  if (input.is('input')) {    input[0][isNegative ? 'stepDown' : 'stepUp']()  }})

.inline-group {  max-width: 9rem;  padding: .5rem;}
.inline-group .form-control {  text-align: right;}
.form-control[type="number"]::-webkit-inner-spin-button,.form-control[type="number"]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /><link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /><script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="input-group inline-group">  <div class="input-group-prepend">    <button class="btn btn-outline-secondary btn-minus">      <i class="fa fa-minus"></i>    </button>  </div>  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">  <div class="input-group-append">    <button class="btn btn-outline-secondary btn-plus">      <i class="fa fa-plus"></i>    </button>  </div></div>

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

How to Remove Arrow on Input type Number with Tailwind CSS

So i found the solution for this -> On your global.css you have to add

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

Styling an input type=number

UPDATE 17/03/2017

Original solution won't work anymore. The spinners are part of shadow dom. For now just to hide in chrome use:

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

<input type="number" />

---

Related Topics