Styling Input Number With Add Button Plus Minus

Intro

Ceritanya lagi gak sreg dengan style input number yang ada dihalaman PassGen karena menampilkan tombol panah atas bawah yang kurang catchy banget dan agak menyusahkan dan juga tidak sedap dipandangnya, hehehe. Tombol panah atas bawah pada input number ini berfungsi untuk menambah dan mengurangi jumlah yang ada.

Nah, gak asik kan ngeliat style input numbernya? hehehe.

Kesulitan

Ternyata ada beberapa kesulitan dan pertimbangan yang didapat ketika lagi cari-cari ide.

Menghilangkan Panah Atas Bawah

Panah atas bawah di input number ini disebutnya spinners yang merupakan sudah menjadi baku untuk shadow dom. Tapi bisa dihilangkan sih, yaitu dengan cara:

Menghilangkan Spinners di Mozilla

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

Menghilangkan Spinners di Chrome

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

Tapi! Ini bukanlah jawaban yang sedang saya cari, karena masih kurang sreg dan gak catchy solusinya.

Nah… cari-cari dan terus mencari ternyata ketemu ide yaitu dengan menambah tombol plus dan minus di input number. Dan ternyata, dengan keyword ini banyak sih di dapat tapi kebanyakan kode yang bertebaran adalah lebih kepada counter. Mmmm… input number yang saya pakai untuk Password Generator di halaman PassGen menggunakan attribut min dan max. Jadinya, kalau menggunakan script counter button input number min dan max nya tidak akan berfungsi.

Nah… ada lagi cara yang lebih mudah, yaitu menggunakan bootstrap, seperti yang ditampilkan dibawah ini.

See the Pen Bootstrap Add Plus Minus Button To Input Number by Darto KLoning (@dartokloning) on CodePen.

Tapi ini ya malah jadi nambah banyak resource, tapi nanti deh kalau lagi ingin berdandan ria, jadinya solusi menggunakan framework bootstrap ya tidak digunakan.

Solusi

Nah, solusi disini yang dimaksud adalah tanpa menggunakan resource ataupun framework css, kalau menggunakan jQuery ya so pastinya yah, karena sepertinya untuk menghilangkan spinners dan dirubah atau dengan menambah tombol plus minus maka ya dibutuhkan javascript.

Cari-cari dan terus mencari dan mungkin banyak metode untuk customize input number ini tapi akhirnya saya berhenti pada 2 metode saja, yaitu:

Metode Pertama

Untuk solusi dari metode pertama ini tampilannya adalah sebagai berikut:

Dan kodenya sebagai berikut:

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

.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;
}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://kloningspoon.com/setelah-install-rocky-linux-terus-ngapain/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#2980B9; text-decoration:none; font-size: 16px; } .IRPP_minimalist .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Baca juga:</span>  <span class="postTitle">Setelah Install Rocky Linux, Terus Ngapain?</span></div></a></div>
.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%;
}

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

source: @komarovdesign

Metode Kedua

Untuk solusi metode kedua, tampilannya sebagai berikut:

Dan untuk kodenya sebagai berikut:

<div class="quantity buttons_added">
	<input type="button" value="-" class="minus" />
  <input type="number" step="1" min="8" max="30" name="quantity" value="8" title="Qty" class="input-text qty text" size="4" pattern="" inputmode="" />
  <input type="button" value="+" class="plus" />
</div>

.quantity {
 display: inline-block; }
.quantity .input-text.qty {
 width: 35px;
 height: 39px;
 padding: 0 5px;
 text-align: center;
 background-color: transparent;
 border: 1px solid #efefef;
}
.quantity.buttons_added {
 text-align: left;
 position: relative;
 white-space: nowrap;
 vertical-align: top; }
.quantity.buttons_added input {
 display: inline-block;
 margin: 0;
 vertical-align: top;
 box-shadow: none;
}
.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
 padding: 7px 10px 8px;
 height: 41px;
 background-color: #ffffff;
 border: 1px solid #efefef;
 cursor:pointer;}
.quantity.buttons_added .minus {
 border-right: 0; }
.quantity.buttons_added .plus {
 border-left: 0; }
.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
 background: #eeeeee; }
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 -moz-appearance: none;
 margin: 0; }
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://kloningspoon.com/cara-cek-whois-domain-indonesia-di-windows-terminal/" target="_blank" rel="nofollow" class="IRPP_minimalist"><style> .IRPP_minimalist { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid #34495E!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .IRPP_minimalist:active, .IRPP_minimalist:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .IRPP_minimalist { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .IRPP_minimalist .ctaText { font-weight:bold; color:#2980B9; text-decoration:none; font-size: 16px; } .IRPP_minimalist .postTitle { color:#000000; text-decoration: underline!important; font-size: 16px; } .IRPP_minimalist:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Baca juga:</span>  <span class="postTitle">Cara Cek WHOIS Domain Indonesia di Windows Terminal</span></div></a></div> 
 .quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
 outline: none; }

function wcqib_refresh_quantity_increments() {
    jQuery("div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)").each(function(a, b) {
        var c = jQuery(b);
        c.addClass("buttons_added"), c.children().first().before('<input type="button" value="-" class="minus" />'), c.children().last().after('<input type="button" value="+" class="plus" />')
    })
}
String.prototype.getDecimals || (String.prototype.getDecimals = function() {
    var a = this,
        b = ("" + a).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
    return b ? Math.max(0, (b[1] ? b[1].length : 0) - (b[2] ? +b[2] : 0)) : 0
}), jQuery(document).ready(function() {
    wcqib_refresh_quantity_increments()
}), jQuery(document).on("updated_wc_div", function() {
    wcqib_refresh_quantity_increments()
}), jQuery(document).on("click", ".plus, .minus", function() {
    var a = jQuery(this).closest(".quantity").find(".qty"),
        b = parseFloat(a.val()),
        c = parseFloat(a.attr("max")),
        d = parseFloat(a.attr("min")),
        e = a.attr("step");
    b && "" !== b && "NaN" !== b || (b = 0), "" !== c && "NaN" !== c || (c = ""), "" !== d && "NaN" !== d || (d = 0), "any" !== e && "" !== e && void 0 !== e && "NaN" !== parseFloat(e) || (e = 1), jQuery(this).is(".plus") ? c && b >= c ? a.val(c) : a.val((b + parseFloat(e)).toFixed(e.getDecimals())) : d && b <= d ? a.val(d) : b > 0 && a.val((b - parseFloat(e)).toFixed(e.getDecimals())), a.trigger("change")
});

source: @TNLakhalani

Dan akhirnya saya memilih untuk menampilkan input number dengan metode kedua, karena tombol plus minusnya agak besar.