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

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

CSS スニペット

次の 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;
}

HTML 実装

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