ブートストラップ スタイルを使用してパーティション化された OTP 入力フィールドを作成する方法

スタイリング手法による入力フィールドの分離

目的は、提供された画像に示されているものと同様のユーザー インターフェイスをデザインすることです。 4 桁の OTP は個別のフィールドに入力できます。従来の方法では 4 つの個別の入力フィールドを作成する必要がありましたが、これを実現するための別のスタイル設定アプローチがある可能性があります。

Bootstrap to the Rescue

Bootstrap フレームワークは、スタイル ソリューションを提供します。これは、単一の入力フィールドを分割されたフィールドに変換し、複数の入力のように見せます。使用方法は次のとおりです:

1. 文字間隔の調整: 文字間隔を広げて数字を視覚的に区切ります。
2. 下枠のスタイルを設定します: 点線または破線の下枠を作成して、別々の境界線をシミュレートします
3. コードスニペットは次のとおりです

<code class="css">#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline : none;
}</code>

<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>

以上がブートストラップ スタイルを使用してパーティション化された OTP 入力フィールドを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。