ホームページ  >  記事  >  ウェブフロントエンド  >  視覚的に区別するために数値入力にテキスト接尾辞を追加する方法

視覚的に区別するために数値入力にテキスト接尾辞を追加する方法

DDD
DDDオリジナル
2024-10-29 20:16:30389ブラウズ

How to Add Text Suffixes to Number Inputs for Visual Differentiation?

数値入力にテキスト接尾辞を追加する

一般的なシナリオでは、数値入力は <code class="css">/* Prepare wrapper element */ div { display: inline-block; position: relative; } /* Position the unit to the right */ div::after { position: absolute; top: 2px; right: .5em; transition: all .05s ease-in-out; } /* Adjust unit position on hover and focus */ div:hover::after, div:focus-within::after { right: 1.5em; } /* Override for Firefox (arrows always shown) */ @supports (-moz-appearance:none) { div::after { right: 1.5em; } } /* Specify abbreviation for each unit class */ .ms::after { content: 'ms'; } .db::after { content: 'db'; } .percent::after { content: '%'; }



以上が視覚的に区別するために数値入力にテキスト接尾辞を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。