KLoningSpoon

We Share Because We Care

  • Passgen
  • Sitemap
  • My Stories
  • Kontak
Home Tips and Trick Styling Input Number With Add Button Plus Minus

Styling Input Number With Add Button Plus Minus

Terbit: Sabtu, 6 Maret 2021 00:50
Modifikasi: Sabtu, 13 Maret 2021 07:01
penulis Darto KLoning //
Tautan: https://darto.id/8i
Waktu Baca: 2 menit

Daftar Isi hide
1. Intro
2. Kesulitan
2.1. Menghilangkan Panah Atas Bawah
2.1.1. Menghilangkan Spinners di Mozilla
2.1.2. Menghilangkan Spinners di Chrome
3. Solusi
3.1. Metode Pertama
3.2. Metode Kedua
3.3. Related posts:

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.

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.

Related posts:

  1. Membuat Web App Menggunakan WordPress
  2. CentOS 7 Tips and Trick
  3. SSH
  4. Membangun KMS Server Untuk Aktivasi Windows dan Office Menggunakan Linux CentOS 7
  5. Raspberry Pi Tips & Trick
  6. Membuat VPN Untuk Mengakses Jaringan Kantor Dari Rumah
  7. Merubah Website Menjadi Aplikasi Desktop
  8. Membuat VM VirtualBox Berjalan Otomatis Saat Booting / Startup di Windows Multiuser Dengan Task Sceduler
  9. HP ProLiant MicroServer N54L

Kategori // Tips and Trick Tag // css, form, html, javascript, jquery

Copyright © 2022 . KLoningSpoon