<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .container{margin: 100px;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:focus+span.title,input:hover+span.title{ transform: translateX(-2.2em); } 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>
原文：https://www.cnblogs.com/island1994/p/9206541.html