鼠标移上去，邮箱不动
来源：4-10 编程练习
小铁门战神
2019-03-22 17:21:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
/*鼠标移上去或者获得焦点、在此处填写代码*/
/*符合验证的label、在此处填写代码*/
/*不符合验证的label、在此处填写代码*/
.container{
margin-left:20px;
position:relative;
}
input{
border:1px solid #999;
outline:0;
width:140px;
height:30px;
line-height:30px;
border-radius:5px;
text-indent:36px;
transition:all .3s;
}
span.title{
position:absolute;
line-height:30px;
height:30px;
left:2px;
top:2px;
transition:all .3s;
}
input:focus,input:hover{
text-indent:2px;
}
input:focus+span.title,input:hover+span.title{
transition:translateX(-120%);
}
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 id="mail" type="email" required placeholder="输入邮箱">
<span class="title">邮箱</span>
<label for="mail"></label>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2019-03-22
你好，代码中属性用错：
转换是transform，不是transition过渡属性哦。
自己再测试下，祝学习愉快！
0
相似问题
回答 1
回答 1