老师，我还没有输入 就说邮箱错误
来源：4-10 编程练习
木子小可爱
2019-10-11 14:14:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.container{
margin:100px;
position:relative;
}
input{
border:1px solid red;
outline:0;
height:30px;
line-height:30px;
border-radius:5px;
box-shadow:0 0 5px red;
text-indent:35px;
transition:all .3;
}
span.title{
position:absolute;
line-height:30px;
height:30px;
left:4px;
top:2px;
transition:all .3;
}
input:focus,input:hover{
text-indent:2px;
}
input:focus + span.title,input:hover + span.title{
transform:translateX(-120%);
}
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
input:valid~label::after{content:'你输入的邮箱正确';}
input:invalid~label::after{content:'你邮箱错误!';}
input:valid{border:1px solid green;}
input:invalid{border:1px solid red;}
</style>
</head>
<body>
<div class='container'>
<input type='email' id='mail' required placeholder="请输入邮箱"><span class='title'>邮箱</span><label for='mail'></label>
</div>
</body>
</html>
1回答
-
好帮手慕糖
2019-10-11
同学你好，这个就是这样的效果哦，因为添加了invalid，一打开就验证了。
希望能帮助到你，祝学习愉快！
0
相似问题