为什么一开始就显示邮箱正确？
来源：4-7 valid和invalid伪类美化表单案例
花生香又脆
2020-02-23 20:09:44
为什么网页一打开就显示绿色边框和邮箱正确？怎样才能在输入后验证？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>valid invalid</title>
<style>
.container{ margin: 100px; position: relative; }
input{ width: 150px; height: 30px; padding: 5px; border: 1px solid #333; border-radius: 5px; text-indent: 34px; transition: all .3s; }
span{ font-size: 16px; position: absolute; top: 9px; left: 4px; transition: all .3s; }
input:hover,input:focus{ text-indent: 4px; transition: all .3s; }
input:hover +span,input:focus +span{ /* left: -40px; */ transform: translate(-135%, 0); transition: all .3s; }
input:focus{ outline: none; }
input:valid{ border: 1px solid green; }
input:valid~label::after{ content: '输入邮箱正确' }
input:invalid{ border: 1px solid red; }
input:invalid~label::after{ content: '输入邮箱不正确' }
</style>
</head>
<body>
<div class="container">
<form action="">
<input type="email" placeholder="请输入邮箱地址">
<span>邮箱</span>
<label for="email"></label>
</form>
</div>
</body>
</html>
2回答
-
同学你好，可以给input标签添加required属性，要求input输入框不为空，这样在打开页面时不符合验证，就会显示input:invalid对应的样式，示例：
添加后，测试代码效果实现的是正确的。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0 -
花生香又脆
提问者
2020-02-23
可以设置在focus之后验证是否符合条件 但是一聚焦就是正确的是什么原因？
0
相似问题
回答 1