<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.container{margin: 20px 0 0 30px;position: relative;}
input{border:1px solid #999;outline: 0;width: 140px;height: 30px;line-height: 30px;border-radius: 5px;transition: text-indent .3s;text-indent: 36px;}
span.title{position: absolute;left: 2px;top: 1px;height: 30px;line-height: 30px;transition: transform .3s}
input:focus,input:hover{
text-indent: 2px;
}
/*这里的加号时指input下面的兄弟元素span*/
input:focus+span.title,input:hover+span.title{
transform: translateX(-2.2em);
}
/* valid表示符合验证，invalid表示不符合验证
“~”表示同父级的label */
input:valid~label::after{content: "正确"}
input:focus: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>
<div class="container">
<input type="tel" id="tel" required placeholder="输入手机">
<span class="title">手机</span>
<label for="tel"></label>
</div>
<div class="container">
<input type="password" id="password" required placeholder="输入密码">
<span class="title">密码</span>
<label for="password"></label>
</div>
</body>
</html>
