Wie füge ich Textsuffixe zur visuellen Unterscheidung zu Zahleneingaben hinzu?

Anhängen von Textsuffixen an Zahleneingaben

In einem typischen Szenario werden Zahleneingaben wie einen Wert in Millisekunden übermitteln. Bei mehreren Zahleneingaben, die Werte in dB oder Prozentsätzen anzeigen, ist es jedoch erforderlich, diese Werte visuell zu unterscheiden. Das Hinzufügen eines Textsuffixes verdeutlicht die Art des dargestellten Werts.

Lösung:

Verwenden Sie einen Wrapper

und positionieren Sie die Einheit als Pseudoelement ::danach mit dem gewünschten Einheitentext.

Implementierung:

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

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

/* Adjust unit position on hover and focus */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Override for Firefox (arrows always shown) */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Specify abbreviation for each unit class */
.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>

Das obige ist der detaillierte Inhalt vonWie füge ich Textsuffixe zur visuellen Unterscheidung zu Zahleneingaben hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

for number position input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn