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
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!
Was ist der Unterschied zwischen Datenbankansichten und Tabellen?
So überprüfen Sie den Portstatus mit netstat
was bedeutet PM
So berechnen Sie die Rückerstattungsgebühr für die Eisenbahn 12306
So registrieren Sie sich für Firmen-Alipay
Was bedeutet MLM-Münze? Wie lange dauert es normalerweise, bis es zusammenbricht?
Was sind die Cloud-Server?
Die Rolle der PHP-Sonde
