Bagaimanakah Saya Boleh Menyembunyikan Kotak Putaran pada Input Nombor HTML5?

Menyembunyikan Kotak Putaran Input Nombor HTML5

Pelayar moden seperti Chrome sering memaparkan kotak putaran bersama input nombor HTML5 untuk pelarasan nilai yang mudah. Walau bagaimanapun, kotak putaran ini kadangkala boleh mengganggu antara muka pengguna.

Satu kaedah untuk menyembunyikan kotak putaran adalah melalui CSS:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

CSS ini dengan berkesan menyembunyikan kotak putaran dalam penyemak imbas Webkit (cth. , Chrome dan Safari) sambil memastikan keserasian dengan Firefox dengan menggunakan -moz-appearance:textfield harta benda.

Dengan melaksanakan CSS ini, anda boleh menghalang paparan anak panah atas/bawah, menyediakan antara muka pengguna yang lebih bersih dan diperkemas untuk input nombor anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyembunyikan Kotak Putaran pada Input Nombor HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!