Bagaimanakah saya boleh menyesuaikan anak panah kenaikan input nombor jenis menggunakan CSS?

Menyesuaikan Anak panah Penambahan pada Input Nombor Jenis Menggunakan CSS

Dalam senario ini, anda menyasarkan untuk mengubah input nombor jenis menjadi komponen yang lebih menarik secara visual, dengan tersuai anak panah kenaikan. Contoh yang diberikan menggunakan teknik CSS dan pendekatan bijak untuk mencapai kesan yang diingini.

Penyelesaian:

Langkah pertama melibatkan menyembunyikan anak panah kenaikan lalai menggunakan CSS:

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

Ini menyembunyikan anak panah, membolehkan anda membuat tersuai anda sendiri reka bentuk.

Seterusnya, buat dua butang berasingan untuk fungsi kenaikan dan penurunan:

<button class="btn btn-plus">+</button>
<button class="btn btn-minus">-</button>

Letakkan butang ini pada kedua-dua belah medan input menggunakan kumpulan input:

<div class="input-group inline-group">
  <div class="input-group-prepend"><button class="btn btn-outline-secondary btn-minus">-</button></div>
  <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
  <div class="input-group-append"><button class="btn btn-outline-secondary btn-plus">+</button></div>
</div>

Akhir sekali, tambah JavaScript untuk mengendalikan operasi kenaikan dan penurunan apabila butang berada diklik:

$('.btn-plus, .btn-minus').on('click', function(e) {
  const isNegative = $(e.target).closest('.btn-minus').is('.btn-minus');
  const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
    input[0][isNegative ? 'stepDown' : 'stepUp']()
  }
})

Pendekatan ini menggabungkan CSS untuk menyembunyikan anak panah lalai, butang tersuai untuk menyediakan fungsi kenaikan dan penurunan, dan JavaScript untuk mengendalikan klik butang dan mengemas kini nilai input dengan sewajarnya, memberikan anda tersuai yang diingini anak panah kenaikan pada input nombor jenis anda.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyesuaikan anak panah kenaikan input nombor jenis menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!