Styling An Input Type=number

July 15, 2023 Post a Comment

Is it possible to apply a style in the inner 'up arrow' and 'down arrow' of a in CSS? I would like to change the background of the up arrow to blue and

Solution 1:

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

<inputtype="number" />

or to always show:

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

<inputtype="number" />

~~You can try the following but keep in mind that works only for Chrome:~~

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

<inputtype="number" />

Solution 2:

For Mozilla

input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;
    margin: 0; 
}

For Chrome

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

Solution 3:

I modified @LcSalazar's answer a bit... it's still not perfect because the background of the default buttons can still be seen in both Firefox, Chrome & Opera (not tested in Safari); but clicking on the arrows still works

Baca Juga

Notes:

Adding pointer-events: none; allows you to click through the overlapping button, but then you can not style the button while hovered.
The arrows are visible in Edge, but don't work because Edge doesn't use arrows. It only adds an "x" to clear the input.

.number-wrapper {
  position: relative;
}

.number-wrapper:after,
.number-wrapper:before {
  position: absolute;
  right: 5px;
  width: 1.6em;
  height: .9em;
  font-size: 10px;
  pointer-events: none;
  background: #fff;
}

.number-wrapper:after {
  color: blue;
  content: "\25B2";
  margin-top: 1px;
}

.number-wrapper:before {
  color: red;
  content: "\25BC";
  margin-bottom: 5px;
  bottom: -.5em;
}

<spanclass='number-wrapper'><inputtype="number" /></span>

Solution 4:

A little different to the other answers, using a similar concept but divs instead of pseudoclasses:

input {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 50px;
  height: 20px;
  padding: 0px;
  font-size: 14pt;
  border: solid 0.5px#000;
  z-index: 1;
}

.spinner-button {
  position: absolute;
  cursor: default;
  z-index: 2;
  background-color: #ccc;
  width: 14.5px;
  text-align: center;
  margin: 0px;
  pointer-events: none;
  height: 10px;
  line-height: 10px;
}

#inc-button {
  left: 46px;
  top: 10.5px;
}

#dec-button {
  left: 46px;
  top: 20.5px;
}

<inputtype="number"value="0"min="0"max="100"/><divid="inc-button"class="spinner-button">+</div><divid="dec-button"class="spinner-button">-</div>

Solution 5:

I've been struggling with this on mobile and tablet. My solution was to use absolute positioning on the spinners, so I'm just posting it in case it helps anyone else:

<html><head><style>body {padding: 10px;margin: 10px}
      input[type=number] {
        /*for absolutely positioning spinners*/position: relative; 
        padding: 5px;
        padding-right: 25px;
      }

      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 {
        -webkit-appearance: inner-spin-button !important;
        width: 25px;
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
      }
    </style><metaname="apple-mobile-web-app-capable"content="yes"/><metaname="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0"/></head><body ><inputtype="number"value="1"step="1" /></body></html>

Html5 Guru