请老师过目

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>b</title>
    <style type="text/css">
        .container{
            margin: 100px;
            position: relative;
        }
        input{
            border: 1px solid #999;
            outline: 0;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-indent: 50px;
            transition: all .3s;
            border-radius: 8px;
        }
        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: translate(-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 type="email" id="mail" required placeholder="请输入邮箱">
        <span class="title">邮箱</span>
        <label for="mail"></label>
    </div>
</body>
</html>

qq_鸭绿桥第一帅哥_0 2019-03-14

源自：项目：HTML5表单验证 4-10 编程练习