Bagaimanakah Saya Boleh Lumpuhkan Butang Anak Panah pada Medan Input Nombor Menggunakan CSS?

Tipu CSS untuk Melumpuhkan Butang Anak Panah pada Input Type="number" Atribut

Pengguna sering menemui butang anak panah pada medan input berangka dalam pelayar desktop seperti Chrome dan Safari. Walau bagaimanapun, butang ini boleh mengganggu estetika reka bentuk tertentu. Bolehkah kami melumpuhkan mereka menggunakan CSS?

Penyelesaian CSS:

Untuk melumpuhkan butang putaran, kami boleh menggunakan peraturan CSS yang menyasarkan bahagian individu medan input:

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

Butang ::-webkit-inner-spin-menyasarkan butang anak panah dalam, manakala ::-webkit-outer-spin-button menyasarkan butang anak panah luar. Dengan menetapkan -webkit-appearance kepada tiada, kami menyembunyikan butang. Selain itu, menetapkan jidar kepada 0 memastikan tiada ruang tambahan tertinggal selepas mengeluarkan butang.

Pemurnian Tambahan:

Pengguna melaporkan bahawa walaupun selepas menyembunyikan butang, ruang kecil kekal di sebelah kanan medan input. Untuk menangani perkara ini, kami perlu menyasarkan margin pemutar itu sendiri:

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

Dengan menggunakan peraturan ini, kami boleh menghapuskan sepenuhnya ruang yang tidak diingini, menghasilkan reka bentuk yang lebih bersih dan lebih diperkemas untuk medan input berangka.

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