Wie füge ich Textsuffixe zur visuellen Unterscheidung zu Zahleneingaben hinzu?-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-10-29 20:16:30

Original

351 Leute haben es durchsucht

How to Add Text Suffixes to Number Inputs for Visual Differentiation?

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!