Bagaimanakah saya boleh menambah akhiran teks tersuai pada input nombor menggunakan CSS untuk pemahaman pengguna yang lebih baik?

Tingkatkan Input Nombor dengan Akhiran Teks Tersuai

Anda mempunyai berbilang input nombor yang mewakili nilai dalam milisaat, dB dan peratusan. Untuk meningkatkan kefahaman pengguna, anda ingin menambah jenis akhiran pada input ini, menunjukkan unit ukuran.

Penyelesaian Menggunakan CSS Wrapper dan Elemen Pseudo

Daripada mengubah suai elemen input itu sendiri, anda boleh menggunakan pembungkus CSS dan elemen pseudo untuk mencapai hasil yang diingini:

1. Buat div pembalut untuk setiap input:

   • Div ini akan meletakkan imbuhan teks dan memastikan ia tidak mengganggu reka letak.

2. Letakkan akhiran sebagai unsur pseudo (:: selepas):

   • Tetapkan kedudukannya kepada mutlak, membenarkan ia terapung di luar div pembalut.
   • Letakkannya pada ofset yang ditentukan (cth., kanan: 0.5em) untuk menjajarkan dengan input.

3. Laraskan kedudukan pada tuding atau fokus:

   • Pada tuding atau fokus dalam pembungkus, alihkan akhiran lebih jauh sedikit (cth., kanan: 1.5em). Ini memuatkan butang anak panah dalam sesetengah penyemak imbas.

4. Sediakan akhiran tersuai:

   • Gunakan kelas CSS yang berasingan untuk setiap unit ( cth., .ms, .db, .percent).
   • Tetapkan sifat kandungan unsur pseudo dalam setiap kelas untuk memaparkan akhiran yang diingini (cth., 'ms', 'db', '%').

Contoh Kod:

<code class="css">div {
  display: inline-block;
  position: relative;
}
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}
.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>

Kini, input nombor anda akan memaparkan jenis akhiran, meningkatkan kejelasan dan pemahaman pengguna.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah akhiran teks tersuai pada input nombor menggunakan CSS untuk pemahaman pengguna yang lebih baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!