show spinner for input type number in HTML5

Question

I am working with HTML5, I am using an numeric control (input type="number"). By default I need the spinner (up & down arrows) to be visible in the control, right now on hover it is visible.

Can I achieve it by CSS? Or is there any other way?

possible duplicate of [number input - always show spin buttons](http://stackoverflow.com/questions/24286506/number-input-always-show-spin-buttons) — user247702, Oct 27 '14 at 11:01

score 6 · Answer 1 · answered Nov 16 '15 at 12:25

You can achieve this using the pseudo classes -webkit-inner-spin-button and -webkit-outer-spin-button. Be aware that this trick will work only in Webkit based browsers, such as Chrome.

Example:

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

Since you want to display when hover event is triggered, the previous example would be:

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

Check this snippet to see an working example.

If you want to expand your functionality to other browsers, you will need to create an widget. The fastest way is using the jQuery UI Spinner widget.

score 1 · Answer 2 · answered Apr 29 '19 at 08:12

1

Input type number does not show increase/decrease buttons on iPhone

Its built into jQuery UI - http://jqueryui.com/spinner/

Or see an example here: http://codepen.io/gmkhussain/pen/mgoZjK

answered Apr 29 '19 at 08:12

GMKHussain

3,342
1
21
19

score 0 · Answer 3 · answered Dec 22 '18 at 11:25

Hopefully this solution helps you or someone else out there with this problem.

console.log("Thank You Jesus!");

$(document).ready(function() {

  /* alert("ready");//Thank You Saviour */
  var minusButton = $(".spinnerMinus"); //to aquire all minus buttons
  var plusButton = $(".spinnerPlus"); //to aquire all plus buttons

  //Handle click
  minusButton.click(function() {
    trigger_Spinner($(this), "-", {
      max: 10,
      min: 0
    }); //Triggers the Spinner Actuator
  }); /*end Handle Minus Button click*/

  plusButton.click(function() {
    trigger_Spinner($(this), "+", {
      max: 10,
      min: 0
    }); //Triggers the Spinner Actuator    
  }); /*end Handle Plus Button Click*/

});



//This function will take the clicked button and actuate the spinner based on the provided function/operator
// - this allows you to adjust the limits of specific spinners based on classnames
function trigger_Spinner(clickedButton, plus_minus, limits) {

  var valueElement = clickedButton.closest('.customSpinner').find('.spinnerVal'); //gets the closest value element to this button
  var controllerbuttons = {
    minus: clickedButton.closest('.customSpinner').find('.spinnerMinus'),
    plus: clickedButton.closest('.customSpinner').find('.spinnerPlus')
  }; //to get the button pair associated only with this set of input controls//THank You Jesus!

  //Activate Spinner
  updateSpinner(limits, plus_minus, valueElement, controllerbuttons); //to update the Spinner

}



/*
 max - maxValue
  min - minValue
  operator - +/-
  elem - the element that will be used to update the count
*/ //Thank You Jesus!
function updateSpinner(limits, operator, elem, buttons) {

  var currentVal = parseInt(elem.val()); //get the current val

  //Operate on value -----------------
  if (operator == "+") {
    currentVal += 1; //Increment by one  
    //Thank You Jesus ----------------
    if (currentVal <= limits.max) {
      elem.val(currentVal);
    }
  } else if (operator == "-") {
    currentVal -= 1; //Decrement by one
    //Thank You Jesus ----------------
    if (currentVal >= limits.min) {
      elem.val(currentVal);
    }
  }

  //Independent Controllers - Handle Buttons disable toggle ------------------------
  buttons.plus.prop('disabled', (currentVal >= limits.max)); //enable/disable button
  buttons.minus.prop('disabled', (currentVal <= limits.min)); //enable/disable button  

}

.spinnerVal {
  text-align: center;
}

.customSpinner {
  display: flex;
  margin-bottom: 10px;
}


/*Apply individual Styles to one*/

.spinner-roundVal {
  margin: auto 2px;
  border-radius: 20px !important;
  width: auto !important;
}

.spinner-roundbutton {
  border-radius: 100px !important;
}

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" type="text/css" />

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

<body>
  <!-- God is good. -->

  <div class="container">

    <h4 style="text-align:center;margin-bottom:50px;margin-top:5%;margin-bottom:5%;">
      Simple Bootstrap Spinners
    </h4>

    <div class="row" style="
        
                                  display: flex;
                                  justify-content: center;
                  flex-direction: column;
                                  align-items: center;
      
      ">

      <div class="col-lg-4">

        <!--Input Form1-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-primary spinnerbutton spinnerMinus spinner-roundbutton">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal spinner-roundVal" />
          <div class="input-group-append">
            <button class="btn btn-primary spinnerbutton spinnerPlus spinner-roundbutton">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form2-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-danger spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-danger spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form3-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-warning spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-warning spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>

      </div>

      <div class="col-lg-4">

        <!--Input Form4-->
        <div class="input-group customSpinner <!--Thank You Jesus!-->">
          <div class="input-group-prepend">
            <button class="btn btn-success spinnerbutton spinnerMinus">
                <span class = "fa fa-minus"></span>
              </button>
          </div>
          <input type="text" readonly value="0" class="form-control spinnerVal" />
          <div class="input-group-append">
            <button class="btn btn-success spinnerbutton spinnerPlus">
                <span class = "fa fa-plus"></span>
              </button>
          </div>
        </div>


      </div>

    </div>

  </div>



</body>
<!-- God is good. -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"></script>

</html>

What's all that with `"Thank you Jesus"`? Was he helping you? LOL — XAMlMAX, Apr 25 '19 at 13:27

joserick · Answer 4 · 2020-09-13T20:29:50.077

0

More easy and beautiful if you has vue.js v-money-spinner :)

DEMO

edited Sep 13 '20 at 20:29

answered Sep 13 '20 at 20:18

joserick

327
3
11

show spinner for input type number in HTML5

4 Answers4