Bagaimana untuk Menambah Sufiks Unit pada Medan Input Nombor dengan CSS?

Cara Menambah Akhiran Teks pada Medan Input Nombor

Untuk memberikan pengguna kejelasan tentang nilai yang dijangkakan dalam pelbagai medan input, anda boleh menambah akhiran yang menunjukkan unit ukuran. Begini cara untuk melakukannya dalam HTML dan CSS:

Balut Input dalam Div

Sertakan setiap elemen input dalam

untuk membuat pembalut. Ini akan membolehkan untuk meletakkan unit sebagai elemen pseudo bersama medan input.

Letakkan Teks Unit

Menggunakan elemen pseudo ::selepas, anda boleh meletakkan teks unit di sebelah kanan pembalut. Tetapkan kedudukan mutlak dengan sifat atas dan kanan untuk mengawal lokasinya.

Urus Tuding dan Fokus

Untuk mengambil kira anak panah yang muncul pada tuding atau fokus, laraskan bahagian kanan harta sewajarnya untuk mengalihkan teks unit lebih jauh ke kiri. Anda juga boleh mengendalikan penyemak imbas seperti Firefox, di mana anak panah sentiasa ditunjukkan.

Tetapkan Singkatan Unit

Buat kelas untuk setiap unit (cth., ms, db, peratus) dan tetapkan singkatan yang sesuai sebagai kandungan untuk elemen pseudo ::after. Ini akan memaparkan unit yang ditetapkan di sebelah medan input.

Contoh Pelaksanaan

<code class="css">/* Wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* Unit positioning */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* Hover/focus adjustments */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Firefox handling */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Unit abbreviations */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds">
</div>

<hr>

<div class="db">
  <input type="number" id="decibel">
</div>

<hr>

<div class="percent">
  <input type="number" id="percentages">
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Menambah Sufiks Unit pada Medan Input Nombor dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!