¿Cómo dar estilo al Input type number?

Los elementos <input> del tipo numérico (Input type number) son usados para permitir al usuario ingresar un número. Éstos incluyen validación incorporada para rechazar entradas no numéricas. El navegador puede optar por proveer flechas de pasos para permitir al usuario incrementar y decrementar el valor usando su ratón o simplemente pulsando con la punta del dedo.

<input type="number" id="tentacles" name="tentacles" min="10" max="100">

En navegadores que no soportan entradas de tipo number, una entrada number recurre al tipo text.

Atributos

Además de los atributos comúnmente soportados por todos los tipos de <input>, las entradas de tipo number soportan estos atributos:

Personalización de los campos input number con css

Uno de los problemas con los Input type number es aplicar un estilo elegante y que afecte sus botones numéricos, parecería algo sencillo de hacer, pero totalmente alejado de la realidad; no obstante, CSS nos ofrece muchas alternativas para modificar los estilos y que así podamos conseguir que su aspecto se adapte a todos los requerimientos visuales al crear una página web.

Ahora veremos los 3 pasos para aplicar un estilo llamativo a nuestro inputo type number, empezando con el código HTML

<div class="quantity">
  <input type="number" min="1" max="9" step="1" value="1">
</div>

Ya que tenemos nuestro código HTML, es hora de aplicar todo el estilo que necesitamos.

.quantity {
  position: relative;
}

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

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

.quantity input {
  width: 45px;
  height: 42px;
  line-height: 1.65;
  float: left;
  display: block;
  padding: 0;
  margin: 0;
  padding-left: 20px;
  border: 1px solid #eee;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
}

Ya deberíamos tener un diseño estilizado y bonito para nuestro input type number, un ultimo paso, necesitamos aplicar un código javascript para que los botones funciones.

    jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');
    jQuery('.quantity').each(function() {
      var spinner = jQuery(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

      btnUp.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue >= max) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue + 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

      btnDown.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue <= min) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue - 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });

    });

Listo, con estos sencillos pasos, tendremos disponibles un input type number, estilizado y totalmente funcional, puedes ver nuestro ejemplo en el siguiente enlace:

Fuente: Clic Aqui