Wie füge ich mithilfe von CSS ein Textsuffix zu einem -Feld hinzu?

Feld mit CSS? " /> Feld mit CSS? " />

Ein Textsuffix zu hinzufügen

Diese Frage dreht sich um die Notwendigkeit, ein Textsuffix an Eingabefelder anzuhängen vom Typ „Zahl“, um die durch den Eingabewert dargestellten Einheiten anzugeben. Dies kann zwar nicht direkt mit CSS erreicht werden, es gibt jedoch eine clevere Problemumgehung mithilfe eines Wrapper-Elements und des Pseudoelements ::after.

Konzept:

• Umschließen Sie jedes Eingabefeld mit einem
  -Element.
• Verwenden Sie das ::after-Pseudoelement, das absolut innerhalb des
  positioniert ist das Einheitensuffix.
• Positionieren Sie das Einheitensuffix rechts vom Eingabefeld mithilfe von Rand oder Auffüllung.
• Ändern Sie den Inhalt des ::after-Pseudoelements, um das gewünschte Einheitensuffix anzuzeigen. z. B. „ms“ für Millisekunden.

Implementierung:

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

Vorteile:

• Ermöglicht eine klare und präzise Einheitenanzeige, ohne das Eingabeelement selbst zu ändern.
• Einfache und browserübergreifende kompatible Lösung.

Einschränkungen:

• Stellen Sie sicher, dass der Eingabewert die Breite des Textfelds nicht überschreitet, um eine Überlappung des Einheitensuffixes zu verhindern.

Das obige ist der detaillierte Inhalt vonWie füge ich mithilfe von CSS ein Textsuffix zu einem -Feld hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!