Wie füge ich mit CSS Einheitensuffixe zu Zahleneingabefeldern hinzu?

Positionieren Sie den Einheitentext

Mit dem Pseudoelement ::after können Sie das platzieren Einheitentext rechts vom Wrapper. Legen Sie die absolute Positionierung mit den Eigenschaften „oben“ und „rechts“ fest, um die Position zu steuern.

Hover und Fokus verwalten

Um die Pfeile zu berücksichtigen, die beim Hover oder Fokus angezeigt werden, passen Sie die rechte Seite an Eigenschaft entsprechend, um den Einheitentext weiter nach links zu verschieben. Sie können auch mit Browsern wie Firefox umgehen, in denen immer Pfeile angezeigt werden.

Abkürzungen für Einheiten festlegen

Erstellen Sie Klassen für jede Einheit (z. B. ms, db, Prozent) und Weisen Sie dem Pseudoelement ::after die entsprechenden Abkürzungen als Inhalt zu. Dadurch werden die angegebenen Einheiten neben den Eingabefeldern angezeigt.

Beispielimplementierung

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

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

/* Hover/focus adjustments */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Firefox handling */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Unit abbreviations */
.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 mit CSS Einheitensuffixe zu Zahleneingabefeldern hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!