在valid后，没有办法使input中的内容与span内容一起左移，加text-indent无用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
.container{
position: relative;
text-align: center;
margin-top: 50px;
width: 380px;
}
input{display: inline-block;
width: 190px;
border:1px solid #999;
height: 30px;
outline: 0;
line-height: 30px;
text-indent: 36px;
transition:all .3s;
border-radius: 4px;
}
div>span{
display: inline-block;
position:absolute;
left: 3px;
height: 30px;
line-height: 30px;
transition:all .3s;
}
/*鼠标移上去或者获得焦点、在此处填写代码*/
input:required:focus,input:required:hover{
text-indent:2px;
}
/*符合验证的label、在此处填写代码*/
input:valid~label:after{
content:"你输入邮箱正确！";
}
input:valid{
background-color:#F0E68C;
border:1px solid #00FF00;
text-indent:10px;
}
input:valid + span, input:valid+span{
transform: translateX(80%);
}
/*不符合验证的label、在此处填写代码*/
input:invalid~label:after{
content:"你邮箱错误！";}
input:invalid{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<input type="email" name="youxiang" required placeholder="输入邮箱" autocomplete="autocomplete">
<span>邮箱</span>
<label></label>
</div>
</body>
</html>
这里如果不想让一开始刷新页面，就变成没有输入邮箱进入invalid的样式，是不是要在input上设置oninvalid和onvalid模式，有没有办法不绑定onvalid和oninvalid事件，使用valid和invalid一开始刷新不会进入invalid的样式
正在回答
是同学修改的有问题，把之前的修改乱的，如下：
自己再测试下。
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星