Bagaimana untuk Menyembunyikan Butang Putaran pada Medan Input Nombor dalam Pelayar Webkit?

Melumpuhkan Butang Putaran Webkit pada Input Type="number"

Apabila mereka bentuk tapak web khusus untuk peranti mudah alih tetapi juga serasi dengan desktop, cabaran tertentu timbul. Satu isu sedemikian ialah paparan butang putaran yang tidak perlu bersebelahan dengan medan input yang ditetapkan sebagai angka. Walaupun ciri ini mungkin bermanfaat untuk nilai yang meningkat atau menurun dengan pantas, ia boleh menjejaskan estetika reka bentuk tertentu.

Untuk menghapuskan butang putaran ini dalam pelayar Safari dan Chrome, adalah disyorkan untuk menggunakan teknik penggayaan CSS yang memanfaatkan -webkit-penampilan harta. Berikut ialah penyelesaian yang menyembunyikan butang putaran dengan berkesan:

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

Dengan menetapkan sifat -webkit-appearance kepada "tiada", butang putaran dilumpuhkan secara visual tanpa menjejaskan kefungsian medan input angka. Penyesuaian ini memastikan reka bentuk yang bersih dan menarik secara visual sambil mengekalkan kefungsian input berangka yang dijangkakan.

Selain itu, untuk menyelesaikan sepenuhnya ruang yang tidak diingini bersebelahan dengan medan input, adalah perlu untuk menetapkan semula margin bukan sahaja pada input itu sendiri tetapi juga pada butang putaran. Coretan CSS berikut melaksanakan perkara ini:

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

Dengan melaraskan kedua-dua rupa dan jidar butang putaran, medan input angka yang dioptimumkan sepenuhnya dicapai, meningkatkan pengalaman pengguna untuk pelawat mudah alih dan desktop.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Butang Putaran pada Medan Input Nombor dalam Pelayar Webkit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!