LINEのロック解除のような入力画面

前提・実現したいこと

お世話になっております。
inputタグを使った、パスワード入力の画面を実装したいのですが、
見た目や動きをLINEのロック解除の際の画面のようにしたいと考えております。

・入力表示部分の４つのアイコンが1文字入力するごとに左からアイコンが変わる
・inputタグを使った場合の入力表示部分の固定（4文字が固定の場所に表示されるようにする）

この部分の実装方法を
色々調べましたが検索の仕方が悪いのか思うような結果が出ません。
ヒントを下さると有り難いです。

試したこと

・inputタグを使った場合の入力表示部分の固定（4文字が固定の場所に表示されるようにする）
につきましてはletter-spacingで間隔を開け、text-align:centerしてみましたが思うような動きになりませんでした。
入力すると、1文字ずつ中央から表示し、横にずれていくため、固定の位置に表示されない。

Lhankor_Mhy

2020/12/24 02:05

https://appllio.com/line-passcode-settings ↑これですか？

..o

2020/12/24 02:12 編集

そうです！全く一緒でなくてもいいのですが、質問内容改善させていただきまして、・入力表示部分の４つのアイコンが1文字入力するごとに左からアイコンが変わる・inputタグを使った場合の入力表示部分の固定（4文字が固定の場所に表示されるようにする）この二点への質問になります。伝え方が難しく、分かりにくくて申し訳ないです。