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.

Styling Input Number With Add Button Plus Minus - Spinners

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

CSS

Menghilangkan Spinners di Chrome

CSS

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.

Baca juga:  Scrolling Di Window Yang Sedang Tidak Aktif di Microsoft Windows

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:

Styling Input Number With Add Button Plus Minus - Method 1
Styling Input Number With Add Button Plus Minus Method 1

Dan kodenya sebagai berikut:

HTML
CSS
JS

source: @komarovdesign

Metode Kedua

Untuk solusi metode kedua, tampilannya sebagai berikut:

Styling Input Number With Add Button Plus Minus - Method 2
Styling Input Number With Add Button Plus Minus Method 2

Dan untuk kodenya sebagai berikut:

HTML
CSS
JS

source: @TNLakhalani

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

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

− one = four