Bagaimanakah saya boleh membuat butang kenaikan dan penurunan tersuai, menarik secara visual untuk medan input nombor jenis dalam CSS?

Menyesuaikan Anak panah Penambahan pada Input Nombor Jenis Menggunakan CSS

Masalah

Medan input nombor jenis memaparkan anak panah kenaikan yang tidak digayakan. Matlamatnya adalah untuk mengubahnya menjadi reka bentuk yang lebih menarik dari segi estetika, serupa dengan butang berasingan.

Penyelesaian Cadangan

Walaupun teknik CSS sahaja tidak dapat mencapai hasil yang diinginkan sepenuhnya, penyelesaian yang bijak wujud. Begini caranya:

1. Sembunyikan Anak Panah Input Asli:

   Menggunakan CSS, tetapkan penampilan: tiada pada ::-webkit-luar -spin-button dan ::-webkit-inner-spin-button pseudo-elemen dalam medan input. Ini akan menyembunyikan anak panah lalai.

2. Buat Butang Tersuai:

   Seterusnya, kelilingi medan input dengan dua butang berasingan, satu untuk mengecil dan satu untuk penambahan. Gunakan ikon Font Hebat atau imej tersuai untuk visual butang.

3. Kendalikan Manipulasi Nilai:

   Tambahkan pendengar acara pada butang tersuai. Apabila butang diklik, cetuskan kaedah stepUp atau stepDown pada medan input asal untuk menukar nilainya dengan sewajarnya.

Contoh Pelaksanaan (Menggunakan jQuery dengan Bootstrap):

<div class="input-group inline-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary btn-minus">
      <i class="fa fa-minus"></i>
    </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">
      <i class="fa fa-plus"></i>
    </button>
  </div>
</div>

$('.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']()
  }
})

.inline-group {
  max-width: 9rem;
  padding: .5rem;
}

.inline-group .form-control {
  text-align: right;
}

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

Persediaan ini menyembunyikan anak panah asli, menambah butang tersuai untuk menambah dan mengecil dan memanipulasi nilai medan input menggunakan kaedah stepUp dan stepDown jQuery.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat butang kenaikan dan penurunan tersuai, menarik secara visual untuk medan input nombor jenis dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!