ユーザーの理解を容易にするために、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 中国語 Web サイトの他の関連記事を参照してください。