Bagaimanakah saya boleh menambah akhiran teks pada elemen `` untuk maklum balas pengguna yang lebih baik?

Menambah Imbuhan Teks pada

Dalam bidang antara muka pengguna, adalah penting untuk memberikan yang jelas dan maklum balas intuitif untuk membimbing pengguna. Apabila berurusan dengan input berangka, ia menjadi penting untuk menyampaikan unit ukuran yang digunakan. Walau bagaimanapun, standard elemen tidak mempunyai fungsi ini. Artikel ini menyelidiki penyelesaian untuk menambahkan akhiran teks pada medan input berangka.

Menggunakan gabungan HTML dan CSS, kami boleh mencipta elemen pembalut tersuai untuk setiap input. Pembalut ini akan meletakkan akhiran unit sebagai unsur pseudo ::after. Dengan menggunakan kedudukan mutlak, elemen pseudo kekal bebas daripada reka letak medan input, membolehkan pilihan penggayaan fleksibel.

Dalam pembungkus, elemen pseudo ::after terletak di bahagian atas dan kanan medan input. Ia mengandungi singkatan unit yang diingini sebagai kandungannya. Pendekatan ini memenuhi senario di mana input pengguna agak pendek, memastikan bahawa akhiran unit kekal boleh dibaca di sebelah nombor.

Untuk mengoptimumkan UX, kami boleh menambah beberapa interaktiviti. Apabila melayang atau memfokus pada medan input, akhiran unit didorong sedikit ke kiri. Gerakan ini bertujuan untuk menampung penampilan butang anak panah dalam penyemak imbas tertentu, memastikan kedua-dua unit dan anak panah kekal kelihatan semasa interaksi pengguna.

Berikut ialah contoh coretan kod yang menunjukkan pelaksanaan:

/* 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;
}

.ms::after {
  content: 'ms';
}

.db::after {
  content: 'db';
}

.percent::after {
  content: '%';
}

/* 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>

Dengan teknik ini, pengguna kini boleh secara intuitif membezakan antara nilai berangka yang mewakili milisaat, desibel atau peratusan. Dengan menambahkan akhiran teks halus ini, kami meningkatkan kebolehgunaan dan kejelasan keseluruhan medan input berangka kami, memperkasakan pengguna untuk menyediakan data yang tepat dan bermakna.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menambah akhiran teks pada elemen `` untuk maklum balas pengguna yang lebih baik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!