如何使用 CSS 將自訂文字後綴添加到數字輸入以便更好地用戶理解？

使用自訂文字後綴增強數字輸入

您有多個數字輸入，表示以毫秒、dB 和百分比為單位的值。為了增強使用者的理解，您需要在這些輸入中添加類型後綴，指示測量單位。

使用CSS 包裝器和偽元素的解決方案

而不是修改輸入元素本身，您可以使用CSS 包裝器和偽元素來實現所需的結果：

1. 為每個輸入建立一個包裝器div：

   • 此div 將定位文字後綴並確保它不會破壞佈局。

2. 將後綴定位為偽元素(:: after):

   • 將其位置設為絕對，允許其浮動在包裝器div 之外。
   • 將其放置在指定的偏移處（例如，右：0.5em）與輸入對齊。

3. 調整懸停或聚焦時的位置：

   • 懸停或聚焦時包裝紙，將後綴稍微移遠一些（例如，右：1.5em）。這可以容納某些瀏覽器中的箭頭按鈕。

4. 提供自訂後綴：

   • 為每個單元使用單獨的CSS 類別（例如，.ms、 .db、.percent)。
   • 設定每個類別中偽元素的 content 屬性以顯示所需的字尾（例如，'ms'、'db'、'%'）。

範例程式碼：

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

現在，您的數位輸入將顯示類型後綴，增強清晰度和用戶理解。

以上是如何使用 CSS 將自訂文字後綴添加到數字輸入以便更好地用戶理解？的詳細內容。更多資訊請關注PHP中文網其他相關文章！