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
Menghilangkan Spinners di Chrome
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:
source: @komarovdesign
Metode Kedua
Untuk solusi metode kedua, tampilannya sebagai berikut:

Dan untuk kodenya sebagai berikut:
source: @TNLakhalani
Dan akhirnya saya memilih untuk menampilkan input number dengan metode kedua, karena tombol plus minusnya agak besar.