Wie kann ich mithilfe von CSS benutzerdefinierte Textsuffixe zu Zahleneingaben hinzufügen, um das Benutzerverständnis zu verbessern?

Zahleneingaben mit benutzerdefinierten Textsuffixen verbessern

Sie verfügen über mehrere Zahleneingaben, die Werte in Millisekunden, dB und Prozentsätzen darstellen. Um das Benutzerverständnis zu verbessern, möchten Sie diesen Eingaben Typsuffixe hinzufügen, die die Maßeinheit angeben.

Lösung mit CSS-Wrapper und Pseudoelement

Anstatt die zu ändern Wenn Sie die Eingabeelemente selbst verwenden, können Sie einen CSS-Wrapper und ein Pseudoelement verwenden, um das gewünschte Ergebnis zu erzielen:

1. Erstellen Sie für jede Eingabe ein Wrapper-Div:

   • Dieses Div positioniert das Textsuffix und stellt sicher, dass es das Layout nicht stört.

2. Positioniert das Suffix als Pseudoelement (:: nachher):

   • Setzen Sie seine Position auf absolut, sodass es außerhalb des Wrapper-Divs schweben kann.
   • Platzieren Sie es am angegebenen Offset (z. B. rechts: 0,5em) um sich an der Eingabe auszurichten.

3. Passen Sie die Position beim Schweben oder Fokussieren an:

   • Beim Schweben oder Fokus innerhalb der Verschieben Sie das Suffix im Wrapper etwas weiter weg (z. B. rechts: 1,5em). Dies ermöglicht Pfeilschaltflächen in einigen Browsern.

4. Benutzerdefinierte Suffixe bereitstellen:

   • Verwenden Sie separate CSS-Klassen für jede Einheit ( z. B. .ms, .db, .percent).
   • Legen Sie die Inhaltseigenschaft des Pseudoelements innerhalb jeder Klasse fest, um das gewünschte Suffix anzuzeigen (z. B. „ms“, „db“, „%“).

Beispielcode:

<code class="css">div {
  display: inline-block;
  position: relative;
}
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}
.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>

Jetzt werden bei Ihren Zahleneingaben die Typsuffixe angezeigt, was die Übersichtlichkeit erhöht und Benutzerverständnis.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS benutzerdefinierte Textsuffixe zu Zahleneingaben hinzufügen, um das Benutzerverständnis zu verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!