、
Material文本框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Material文本框</title> </head> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; position: relative; } .form-item { width: 300px; height: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 1px solid #898989; } #userName { width: 100%; height: 100%; border: none; outline: none; } .bar { display: block; margin: 0 auto; width: 0; height: 2px; background-color: #5264ae; transition: 0.4s ease; } label { font-size: 26px; position: absolute; top: -7px; left: 0; transition: 0.4s ease; } .form-item input:focus~.bar { width: 100%; } .form-item input:valid~label { color: #5264ae; transform: translateY(-30px); } .form-item input:focus~label { color: #5264ae; transform: translateY(-30px); } </style> <body> <div class="form-item"> <input type="text" required id="userName"> <span class="bar"></span> <label for="userName"> User Name</label> </div> </body> </html>
