Customizing Increment Arrows on Input of Type Number Using CSS

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>

Customize Increment Arrows on Input of Type Number Using CSS

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

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

.number-input {
    border: 2px solid #ddd;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline:none;
    -webkit-appearance: none;
    background-color: #eeeeee;
    border: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding:0;
}

.number-input button:before,
.number-input button:after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.number-input button.plus:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: sans-serif;
    max-width: 4.5rem;
    padding: .5rem;
    border:0;
    text-align: center;
    outline:none;
}
.number-input{
    border: solid #c2c4c6;
    border-width:2px;
}
<td>
  <div class="form-row justify-content-center">
    <div class="form-group mb-0">
      <div class="input-group mx-auto mb-0">
        <div class="number-input">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
          <input class="quantity bg-light" min="0" placeholder="0" name="quantity" value="1" type="number">
          <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
        </div>
      </div>
    </div>
  </div>
</td>

Override html input[type=number] styling for changing the arrows

i think this code is exact match with your requirement

Link Here: https://jsfiddle.net/mohitraiyani/mje4zco5/2/

javascript , html, css

Style input type number more plus button on the side

Below you can see the snippet and if you wanna see it in JSFIDDLE, take a look here: http://jsfiddle.net/74xa8Ler/

To explain a bit, how the whole thing works: Here, you'll use css for some styling manipulation.

But in the html code, you see 2 buttons:

<button onclick="this.parentNode.querySelector('input[type=number]')" ></button>

One with .stepDown() and the other one with .stepUp(). As you can see querySelector is being used to connect these buttons to your input.

So the way it works when a button is clicked, it looks at your querySelector and after that, the action which is .stepUp() or .stepDown() and apply it to your input.

Remember if you have several inputs with type="number", you can't simply do .querySelector('input[type=number]')" on all of them. You would need to add id or class to each input or even input[name=yourName] and let the querySelector select your correct input.

input[type="number"] {  -webkit-appearance: textfield;  -moz-appearance: textfield;  appearance: textfield;}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;}
.number-input {  border: 0;  display: inline-flex;}
.number-input,.number-input * {  box-sizing: border-box;}
.number-input button {  outline:none;  -webkit-appearance: none;  background-color: transparent;  border: none;  align-items: center;  justify-content: center;  width: 3rem;  height: 3rem;  cursor: pointer;  margin: 0;  position: relative;  box-shadow: 0px 0px 1px #474747;    border-radius: 50%;}
.number-input button:before,.number-input button:after {  display: inline-block;  position: absolute;  content: '';  width: 1rem;  height: 2px;  background-color: #212121;  transform: translate(-50%, -50%);}.number-input button.plus:after {  transform: translate(-50%, -50%) rotate(90deg);}
.number-input input[type=number] {  font-family: sans-serif;  max-width: 5rem;  padding: .5rem;  border: none;  border-width: 0 2px;  font-size: 2rem;  height: 3rem;  font-weight: bold;  text-align: center;  color:#9be3df;}
<div class="number-input">  <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>  <input class="quantity" min="0" name="quantity" value="1" type="number">  <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button></div>

Remove the up/down increment/decrement buttons on number inputs using CSS

The following CSS code will remove the arrows on all inputs:

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

This can be modified to:

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

Which will only modify the inputs that are contained in an element with the class money, in case you want to use some other number inputs with the increment/decrement arrows.

Solution

Customize on Input of Type Using CSS

Check out this snippet:

        input[type="number"] {
            -webkit-appearance: textfield;
            -moz-appearance: textfield;
            appearance: textfield;
        }

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

        .number-input {
            border: 2px solid #ddd;
            display: inline-flex;
        }

        .number-input,
        .number-input * {
            box-sizing: border-box;
        }

        .number-input button {
            outline:none;
            -webkit-appearance: none;
            background-color: transparent;
            border: none;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            cursor: pointer;
            margin: 0;
            position: relative;
        }

        .number-input button:before,
        .number-input button:after {
            display: inline-block;
            position: absolute;
            content: '';
            width: 1rem;
            height: 2px;
            background-color: #212121;
            transform: translate(-50%, -50%);
        }
        .number-input button.plus:after {
            transform: translate(-50%, -50%) rotate(90deg);
        }

        .number-input input[type=number] {
            font-family: sans-serif;
            max-width: 5rem;
            padding: .5rem;
            border: solid #ddd;
            border-width: 0 2px;
            text-align: center;
        }

        .magenta{
            background-color: magenta;
        }
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- JQuery -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body class="magenta">
    <table class="mx-auto">
        <tr>
            <td>
                <div class="form-row justify-content-center">
                    <div class="form-group">
                        <div class="input-group mx-auto mb-3">
                            <div class="number-input">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
                                <input class="quantity bg-light" min="0" placeholder="0" name="quantity" value="1" type="number">
                                <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Customized Increment Arrows on Input doesn't work! How to collect the input value through buttons?

public updateQuantity(update: number): void {  this.item.quantity += update;}
public updateCart(item): void {    console.log(item);    this.cart.updateItem(item);    this.eCart.next(this.cart.getCart());}
<div class='child'>  <div class='fourth'>    <ul class='p-0 m-0'>      <li *ngFor='let item of product.items' class='def-number'>        <a (click)='updateQuantity(-1)' class="minus">-</a>        <input type='number' placeholder='0' [(ngModel)]='item.quantity' (ngModelChange)='updateCart(item)' min='0'>        <a (click)='updateQuantity(1)' class='plus'>+</a>      </li>    </ul>  </div></div><div class='child d-flex align-items-center justify-content-center'>  <div class='fifth'>    <ul class='p-0 m-0'>      <li *ngFor='let item of product.items' style='line-height: 82px'>        <button class='cart' (click)='addItem()'><i class='icon-addcart'></i></button>      </li>    </ul>  </div></div>

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

Angular 2 Checkbox Two Way Data Binding

Should I Embed Images as Data/Base64 in CSS or Html

How to Set a Background-Color For the Width of Text, Not the Width of the Entire Element, Using Css

Wcf Service to Accept a Post Encoded Multipart/Form-Data

How to Make My Flexbox Layout Take 100% Vertical Space

Google Fonts Are Not Rendering on Google Chrome

Html 5 Geo Location Prompt in Chrome

In Indexeddb, How to Make a Sorted Compound Query

How to Set Date Format in HTML Date Input Tag

Difference in Applying CSS to Html, Body, and the Universal Selector *

Html5 Canvas and Anti-Aliasing

How to Put Binary Image Data into HTML Markup and Then Get the Image Displayed as Usual in Any Browser

Css Set Background-Image by Data-Image Attr

Why Is My Grid Element'S Height Not Being Calculated Correctly

Word Wrap Options in a Select List

What Are the Integrity and Crossorigin Attributes

How to Turn Off Word Wrapping in Html

How to Allow Only One Radio Button to Be Checked


Leave a reply



Submit