HTML&；CSS分割输入表单-逐字符

我尝试拆分输入字段以生成如下内容：

但我陷入困境，没有找到任何帮助我的东西。我发现类似的东西，但不是我想要的：

input[type=“text”]{
边界：无；
宽度：400px；
背景：重复线性梯度（90度，dimgrey 0，dimgrey 1ch，透明0，透明1.5ch）0 100%/52%2px无重复；
颜色：浅灰色；
字体系列：monospace；
字母间距：.5cm；
}
输入：焦点{
大纲：无；
颜色：淡蓝色；
}

名称：

我通过对

背景

、

字母间距

和

左侧填充的更改，让它更仔细地观察：


input[type=“text”]{
边框：实心1px浅灰色；
宽度：400px；
背景：重复线性梯度（90度，#fffffff0px，#fffff19px，#00000020px）；
颜色：浅灰色；
字体系列：monospace；
字母间距：1.75ch；
左侧填充：0.8ch；
}
输入：焦点{
大纲：无；
颜色：淡蓝色；
}
名称：
谢谢@RachelGallen，但我希望代码只包含HTML和CSS。我找到了下面的答案。非常感谢！