css表单设计编写不用length选择器检测密码长度必须在6到12个字符之间
时间: 2023-05-29 16:03:23 浏览: 64
使用伪类选择器和属性选择器来实现:
```css
input[type="password"]:not(:placeholder-shown) {
border-color: #ccc;
}
input[type="password"]:not(:placeholder-shown):invalid {
border-color: red;
}
input[type="password"]:not(:placeholder-shown):valid {
border-color: green;
}
input[type="password"]:not(:placeholder-shown):valid + span {
display: none;
}
input[type="password"]:not(:placeholder-shown):invalid + span {
display: block;
color: red;
font-size: 0.8em;
}
input[type="password"]:not(:placeholder-shown):valid + span:after {
content: "✔";
color: green;
margin-left: 0.2em;
}
input[type="password"]:not(:placeholder-shown):invalid + span:after {
content: "✖";
color: red;
margin-left: 0.2em;
}
input[type="password"]:not(:placeholder-shown):valid:not(:required) + span {
display: none;
}
input[type="password"]:not(:placeholder-shown):invalid:not(:required) + span {
display: none;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown) {
border-color: #ccc;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):invalid {
border-color: red;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):valid {
border-color: green;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):valid + span {
display: none;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):invalid + span {
display: block;
color: red;
font-size: 0.8em;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):valid + span:after {
content: "✔";
color: green;
margin-left: 0.2em;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):invalid + span:after {
content: "✖";
color: red;
margin-left: 0.2em;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):valid:not(:required) + span {
display: none;
}
input[type="password"][minlength="6"][maxlength="12"]:not(:placeholder-shown):invalid:not(:required) + span {
display: none;
}
input[type="password"][required]:not(:placeholder-shown) {
border-color: #ccc;
}
input[type="password"][required]:not(:placeholder-shown):invalid {
border-color: red;
}
input[type="password"][required]:not(:placeholder-shown):valid {
border-color: green;
}
input[type="password"][required]:not(:placeholder-shown):valid + span {
display: none;
}
input[type="password"][required]:not(:placeholder-shown):invalid + span {
display: block;
color: red;
font-size: 0.8em;
}
input[type="password"][required]:not(:placeholder-shown):valid + span:after {
content: "✔";
color: green;
margin-left: 0.2em;
}
input[type="password"][required]:not(:placeholder-shown):invalid + span:after {
content: "✖";
color: red;
margin-left: 0.2em;
}
input[type="password"][required]:not(:placeholder-shown):valid:not(:required) + span {
display: none;
}
input[type="password"][required]:not(:placeholder-shown):invalid:not(:required) + span {
display: none;
}
```
在HTML表单中,可以添加以下代码:
```html
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="6" maxlength="12" required>
<span>Password must be 6-12 characters long.</span>
```
这样,当用户输入密码时,如果密码长度不在6-12个字符之间,就会显示警告信息并将边框颜色变为红色。如果密码长度正确,则边框颜色变为绿色,并隐藏警告信息。如果密码框为空,则不显示警告信息。