Bagaimanakah Saya Boleh Mengalih Keluar Butang Putaran daripada Medan Input Nombor dalam Pelayar Webkit?

Menghalang Paparan Butang Putaran dalam Penyemak Imbas Berasaskan Webkit

Dalam pembangunan web, adalah perkara biasa untuk menghadapi masalah keserasian merentas pelayar. Satu isu sedemikian timbul apabila menggunakan pada pelayar berasaskan webkit seperti Chrome dan Safari. Penyemak imbas ini memaparkan butang putaran yang tidak diingini di sebelah kanan medan input nombor.

Melumpuhkan Butang Putar dengan CSS

Untuk menyelesaikan isu ini, kami boleh memanfaatkan CSS untuk melumpuhkan butang putaran pada pelayar ini. Kuncinya adalah untuk menyasarkan sifat CSS tertentu yang mengawal penampilan dan tingkah laku butang putaran.

Peraturan CSS berikut menyelesaikannya dengan mengalih keluar penampilan butang putaran dan menetapkan marginnya kepada sifar:

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

Penyelesaian Komprehensif

Pada mulanya, peraturan di atas mungkin meninggalkan ruang kecil dikhaskan untuk putaran butang di sebelah kanan. Untuk menangani perkara ini, anda juga perlu memusnahkan padding pada medan input. Oleh itu, penyelesaian CSS yang lengkap menjadi:

input[type=number] {
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
}

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

Dengan melaksanakan peraturan CSS ini, butang putaran akan dilumpuhkan dengan berkesan, meninggalkan antara muka yang bersih dan konsisten merentas penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengalih Keluar Butang Putaran daripada Medan Input Nombor dalam Pelayar Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!