身份证输入框
时间: 2023-09-02 07:09:40 浏览: 148
以下是一个简单的身份证输入框的 HTML 和 CSS 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>身份证输入框</title>
<style>
.id-input {
width: 300px;
margin: 50px auto;
text-align: center;
}
.id-input input[type="text"] {
width: 50px;
height: 30px;
padding: 5px;
margin-right: 5px;
text-align: center;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
outline: none;
}
.id-input input[type="text"]:focus {
border-color: #0078ff;
box-shadow: 0 0 5px #0078ff;
}
</style>
</head>
<body>
<div class="id-input">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
</body>
</html>
```
这个身份证输入框使用了 13 个 `input` 标签,每个标签限制了输入为单个数字,并设置了最大输入长度为 1。CSS 样式部分使用了一些简单的布局和样式设计来美化输入框界面,同时设置了 `focus` 状态下的样式以及阴影效果来增加用户体验。根据实际需要,可以对该代码进行相应的修改和优化。