Question

我想做这个

但我不知道如何制作正方形以及如何在一个正方形中设置只能输入一个字母。到目前为止我写了这个，但我真的不知道如何继续。

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

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

Answer 1

更新：感谢@Danield的评论，我更新了更合适的单位。

您可以使用线性渐变但是如果您想在一个插槽中放一个字母，则需要注意不同的尺寸和字体系列：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

你可以使用javascript进行操作，但让我们继续使用html5和css，因为你可以看到here：

使用 maxlenght 属性：

<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">

请记住创建一个类或使用bootstrap类float-left，我使用了内联css，但这不是一个好习惯。

如果您需要输入不同的边框，可以使用css：

<input type="text" name="my_text[]" maxlength="1" class="my_text">
<style>
.my_text{
    border: 1px solid #000;
    float:left;
}
</style>

Answer 3

 <!DOCTYPE html>
 <html>
 <head>
 <link  href="CSS/style.css" rel="stylesheet" type="text/css">
 <title>Laborator 2(P6)</title>
 <style>
  input {
    width: 1.5em;
    border: 1px solid black;
  }
 </style>
 </head>
 <body>

 <div>
     <label><b>CNP</b></label>

     <input type="text" size=1 maxlength=1>
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">
     <input type="text" size=1 maxlength=1 style="margin-left:-5px">

 </div>
 </body>

请注意，CSS中的input元素是元素选择器。

Answer 4

你可以使用重复线性渐变和间距来实现它，但是如果你想添加自动选项卡效果，你必须使用jquery，你可以在下面找到一个例子：

<body>
    <link  href="CSS/style.css" rel="stylesheet" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Laborator 2(P6)</title>
    <label style="float:left; margin-right:5px;"><b>CNP</b></label>
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />
    <input type="text" class="inputclass1" maxlength="1" />     
    <style>
        body {
          padding: 20px;
        }

        form > div {
          margin: 0 0 20px 0;
        }

        .inputclass1 {
            width:20px;
            border: 1px solid black;
            float:left          
        }
    </style>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            if($(this).val().length==$(this).attr("maxlength")){
                $(this).next().focus();
            }
        });
    });
</script>

制作自定义输入文本类型

4 个答案: