Bagaimana untuk Menambah Akhiran Teks pada Medan Menggunakan CSS?

Medan Menggunakan CSS? " /> Medan Menggunakan CSS? " />

Tambahkan Akhiran Teks pada

Soalan ini berkisar tentang keperluan untuk menambahkan akhiran teks pada medan input jenis "nombor" untuk menunjukkan unit yang diwakili oleh nilai input Walaupun ini tidak boleh dicapai secara langsung dengan CSS, terdapat penyelesaian yang bijak menggunakan elemen pembalut dan elemen pseudo ::after.

Konsep:

• Balut setiap medan input dalam
  akhiran unit.
• Letakkan akhiran unit di sebelah kanan medan input menggunakan margin atau padding.
• Tukar kandungan ::selepas unsur pseudo untuk memaparkan akhiran unit yang dikehendaki, cth., "ms" untuk milisaat.

Pelaksanaan:

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

/* Unit suffix position */
div::after {
  position: absolute;
  right: 1em;  /* Adjust as needed */
}

/* Example unit suffixes */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'dB';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds" />
</div>
<br>
<div class="db">
  <input type="number" id="decibel" />
</div>
<br>
<div class="percent">
  <input type="number" id="percentages" />
</div></code>

Faedah:

Membenarkan penunjuk unit yang jelas dan ringkas tanpa mengubah suai elemen input itu sendiri.

• Penyelesaian yang serasi mudah dan merentas penyemak imbas.

Penghadan:

Pastikan nilai input tidak melebihi lebar medan teks untuk mengelakkan akhiran unit daripada bertindih.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Akhiran Teks pada Medan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!