Bagaimanakah Saya Boleh Menyesuaikan Anak Panah Kenaikan pada Input Nombor Jenis Menggunakan CSS?

Menyesuaikan Anak Panah Penambahan pada Input Nombor Jenis Menggunakan CSS

Anda mahu mengubah suai medan input nombor jenis untuk menjadikannya kelihatan lebih bergaya dengan anak panah kenaikan tersuai. Anak panah kenaikan lalai, selalunya diwakili oleh tanda tambah dan tolak, boleh disembunyikan dan digantikan dengan butang luaran.

Untuk mencapai ini, anda boleh menggunakan langkah berikut:

1. Alih keluar penampilan anak panah kenaikan lalai dengan menggunakan CSS berikut pada input medan:

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

2. Buat dua butang berasingan untuk tindakan kenaikan dan pengurangan. Gunakan HTML dan CSS untuk menentukan gaya mereka:

<button class="btn btn-plus">
    <i class="fa fa-plus"></i>
</button>

<button class="btn btn-minus">
    <i class="fa fa-minus"></i>
</button>

3. Tambah CSS yang sesuai untuk melaraskan jarak dan penjajaran elemen:

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

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

4. Melaksanakan fungsi untuk butang kenaikan dan pengurangan menggunakan JavaScript:

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

Dengan melaksanakan perubahan ini, anda boleh menyesuaikan anak panah kenaikan pada medan input, menjadikannya menarik dan berfungsi secara visual.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Anak Panah Kenaikan pada Input Nombor Jenis Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!