Wie füge ich mit CSS Einheitensuffixe zu Zahleneingabefeldern hinzu?-CSS-Tutorial-php.cn

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

DDD

Freigeben： 2024-10-25 17:05:02

Original

377 Leute haben es durchsucht

How to Add Unit Suffixes to Number Input Fields with CSS?

So fügen Sie Textsuffixe zu Zahleneingabefeldern hinzu

Um Benutzern Klarheit über die in verschiedenen Eingabefeldern erwarteten Werte zu verschaffen, können Sie diese anhängen Suffixe, die die Maßeinheiten angeben. So erreichen Sie dies in HTML und CSS:

Eingaben in ein Div einschließen

Schließen Sie jedes Eingabeelement in ein

ein. um einen Wrapper zu erstellen. Dies ermöglicht die Positionierung der Einheit als Pseudoelement neben dem Eingabefeld.

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>

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