Bagaimana untuk Menyembunyikan Kotak Spin dalam Input Nombor HTML5?

Menyembunyikan Kotak Spin dalam Input Nombor HTML5

Dalam landskap pembangunan web hari ini, jenis input nombor HTML5 menawarkan cara yang mudah untuk menangkap input pengguna berangka . Walau bagaimanapun, sesetengah penyemak imbas, termasuk Chrome, memaparkan anak panah putaran atas/bawah di samping medan input. Walaupun anak panah ini mungkin berguna dalam kes tertentu, mungkin terdapat keadaan apabila ia tidak diingini.

Pendekatan CSS dan JavaScript

Terdapat pelbagai kaedah untuk menyembunyikan putaran kotak dalam medan input nombor HTML5. CSS dan JavaScript menawarkan penyelesaian yang berkesan:

Kaedah CSS

CSS menyediakan penyelesaian yang mudah untuk menyembunyikan butang putaran. Peraturan CSS berikut mengalih keluar penampilan kotak spin untuk penyemak imbas webkit seperti Chrome dan Safari:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Adjust if necessary to remove any lingering margins */
}

Selain itu, untuk keserasian optimum dengan Firefox, peraturan CSS lain diperlukan:

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

Kaedah JavaScript

Sebagai alternatif, JavaScript boleh digunakan untuk menyembunyikan kotak putaran. Kaedah ini melibatkan pengubahsuaian sifat DOM medan input:

const input = document.querySelector('input[type="number"]');
input.style.appearance = 'none';

Kesimpulan

Kedua-dua CSS dan JavaScript menawarkan cara yang berkesan untuk menyembunyikan kotak putaran dalam medan input nombor HTML5. Dengan menyesuaikan penampilan input, pembangun boleh mencipta antara muka pengguna yang lebih disesuaikan yang memenuhi keperluan khusus aplikasi mereka.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Kotak Spin dalam Input Nombor HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!