如何使用 CSS 新增單位後綴到數字輸入欄位？

如何在數位輸入欄位中加入文字字尾

為了讓使用者清楚了解各種輸入欄位中的預期值，您可以附加表示測量單位的後綴。以下是如何在 HTML 和 CSS 中完成此操作：

將輸入包裹在 Div 中

將每個輸入元素括在

中。建立一個包裝器。這將允許將單位作為偽元素定位在輸入欄位旁邊。

定位單位文字

使用 ::after 偽元素，您可以放置​​包裝器右側的單位文字。使用 top 和 right 屬性設定絕對定位來控制其位置。

管理懸停和焦點

要考慮懸停或焦點時出現的箭頭，請調整右側屬性相應地將單位文本進一步向左移動。您也可以處理像 Firefox 這樣始終顯示箭頭的瀏覽器。

設定單位縮寫

為每個單位建立類別（例如 ms、db、百分比）和指定適當的縮寫為 ::after 偽元素的內容。這將在輸入欄位旁邊顯示指定的單位。

範例實作

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

以上是如何使用 CSS 新增單位後綴到數字輸入欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！