<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>login</title> <style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; } body { min-height: 100vh; background-image: linear-gradient(120deg, #3498db, #8e44ad); } .login-form { width: 360px; background: #f1f1f1; height: 400px; padding: 40px 40px; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .login-form h1 { text-align: center; margin-bottom: 20px; } .txtb { border-bottom: 2px solid #adadad; position: relative; margin: 30px 0; } .txtb input { font-size: 15px; color: #333; border: none; /* width: 100%; */ outline: none; background: none; padding: 0 5px; height: 40px; } .txtb span::before { content: attr(data-placeholder); position: absolute; top: 50%; left: 35px; color: #adadad; transform: translate(-50%); z-index: -1; transition: .5s; } .txtb span::after { display: block; content: ""; position: absolute; width: 0%; height: 2px; background: linear-gradient(120deg, #3498db, #8e44ad); transition: .5s; } .focus+span::before { top: -5px; } .focus+span::after { width: 100%; } .loginbtn { display: block; width: 100%; height: 50px; border: none; background: linear-gradient(120deg, #3498db, #8e44ad); background-size: 200%; color: #fff; cursor: pointer; outline: none; transition: .5s; font-size: 20px; letter-spacing: 10px; } .loginbtn:hover { background-position: right; } .bottom-text { margin-top: 40px; text-align: center; font-size: 13px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <form action="index.html" class="login-form"> <h1>Login</h1> <div class="txtb"> <input type="text"></input> <span data-placeholder="Username"></span> </div> <div class="txtb"> <input type="password"></input> <span data-placeholder="Password"></span> </div> <input type="submit" class="loginbtn" value="登入"> <div class="bottom-text"> Don\'t have account?<a href="#">Sign Up</a> </div> </form> <script type="text/javascript"> $(".txtb input").on("focus", function() { console.log(333333) $(this).addClass("focus"); }); $(".txtb input").on("blur", function() { if ($(this).val() == "") { $(this).removeClass("focus"); } }) </script> </body> </html>