CSS を使用して数値入力フィールドに単位接尾辞を追加する方法

数値入力フィールドにテキスト接尾辞を追加する方法

さまざまな入力フィールドで期待される値をユーザーにわかりやすく提供するために、測定単位を示す接尾辞。 HTML と CSS でこれを実現する方法は次のとおりです。

入力を Div で囲む

各入力要素を

で囲みます。ラッパーを作成します。これにより、入力フィールドの横に擬似要素としてユニットを配置できるようになります。

ユニット テキストの配置

::after 擬似要素を使用すると、ラッパーの右側のユニットテキスト。位置を制御するには、上部および右側のプロパティで絶対位置を設定します。

ホバーとフォーカスの管理

ホバーまたはフォーカス時に表示される矢印を考慮して、右側のプロパティを調整します。それに応じてプロパティを変更して、単位テキストをさらに左に移動します。矢印が常に表示される 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 中国語 Web サイトの他の関連記事を参照してください。