请问为什么<span class="title">邮箱</span>要放在input后面？
<input id="mail" type="email" required placeholder="输入邮箱">
<span class="title">邮箱</span>
<label for="mail"></label>
不是一般都将<span class="title">邮箱</span>放在前面吗？
而且按效果上的顺序看也是邮箱在前面呀，为什么放前面就实现不了这个效果呢？
正在回答
你好，span.title放在前面也是可以的，都是需要通过定位实现的。
同学可以将自己写的代码粘贴上来，老师帮助你测试下问题。
祝学习愉快！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS表单验证美化（invalid和valid）应用案例</title>
<style>
.container{
margin:100px;
position:relative;
}
input{
border: 1px solid #999;
outline:0;
width:140px;
height:30px;
line-height:30px;text-indent:36px;transition: all .3s;
border-radius:5px;
}
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{
transform: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">
<span class="title">邮箱</span>
<input id="mail" type="email" required placeholder="输入邮箱">
<label for="mail"></label>
</div>
</body>
</html>
这样移到表单里前面的邮箱不会移动
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星