単一の入力フィールドをパーティション化された入力としてスタイル設定するには?

入力フィールドを分割された入力としてスタイル設定する

一連の分割された入力フィールドを作成するには、多数の方法が存在します。 1 つの方法では、「文字間隔」を利用して、単一の入力フィールド内の文字を区切ります。さらに、「background-image」と「border-bottom」のスタイルを使用すると、複数の入力フィールドの錯覚をさらに高めることができます。

CSS スニペット

次の CSS コードは、その方法を示しています。目的の効果を作成するには:

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

HTML 実装

この CSS を使用するには、次の HTML コードをページに追加するだけです:

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

以上が単一の入力フィールドをパーティション化された入力としてスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。