将输入字段设置为分区输入
有多种方法可用于创建一系列分区输入字段。一种方法利用“字母间距”来分隔单个输入字段内的字符。此外,“background-image”和“border-bottom”样式可以进一步增强多个输入字段的错觉。
CSS Snippet
以下 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;
}
HTML 实现
要使用此 CSS,只需将以下 HTML 代码添加到您的页面:
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3