制作自定义输入文本类型 [英] Making a custom input text type

问题描述

我要做这个

但是我不知道如何制作正方形以及如何将其设置为一个正方形，只能输入一个字母.到目前为止，我已经写了这篇文章，但我真的不知道该如何继续.

but I don't know how to make the squares and how to set that in one square only one letter can be entered. So far I wrote this, but I really don't know how to continue.

.input {
  width: 200px;
  border: 1px solid black;
}

<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">

推荐答案

更新:感谢@Danield的评论，我使用更合适的单元进行了更新.

UPDATE : Thanks to the comments of @Danield I updated with more appropriate unit.

您可以使用线性渐变BUT，如果要在一个插槽中包含一个字母，则需要注意不同的大小和字体系列:

You can use linear-gradient BUT you need to pay attention to different sizes and to the font-family if you want to have one letter inside one slot:

.input {
  /* each letter will take 1ch + 1px and we remove 1px of the last one*/
  width: calc(15 * (1ch + 1px) - 1px);
  border: 1px solid black;
  background: 
  /* 1ch space for the letter + 1px border */
  repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
  font-size: 29px;
  /*since a letter will take 1ch we add 1px to cover the border*/
  letter-spacing: 1px; 
  /*we use a monospace font-family so all the letter will take the same width = 1ch*/
  font-family: monospace;
}

<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">

这篇关于制作自定义输入文本类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！