如何将单个输入字段设置为分区输入？-css教程-PHP中文网

如何将单个输入字段设置为分区输入？

Susan Sarandon

发布： 2024-11-01 02:27:02

原创

517 人浏览过

How to Style a Single Input Field as Partitioned Inputs?

将输入字段设置为分区输入

有多种方法可用于创建一系列分区输入字段。一种方法利用“字母间距”来分隔单个输入字段内的字符。此外，“background-image”和“border-bottom”样式可以进一步增强多个输入字段的错觉。

CSS 片段

以下 CSS 代码演示了如何创建所需的效果：

<code class="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;
}</code>

登录后复制

HTML 实现

要使用此 CSS，只需将以下 HTML 代码添加到您的页面：

<code class="html"><input id="partitioned" type="text" maxlength="4" /></code>

登录后复制

以上是如何将单个输入字段设置为分区输入？的详细内容。更多信息请关注PHP中文网其他相关文章！