一个很有特色的文本输入框(input text)样式
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>三十客-定制文本输入框(input text)样式</title> <style> .fancy-label { position: relative; margin-bottom: 20px; } .fancy-label label { position: absolute; top: 14px; left: 7px; padding: 0 5px; -webkit-transition: top .5s, font-size .3s; transition: top .5s, font-size .3s; } .fancy-label input { height: 45px; padding: 0 12px; } .fancy-label input:hover + label, .fancy-label input:focus + label, .fancy-label input:valid + label { top: -9px; font-size: 12px; } label { color: #000; background: #fff; } input { color: #000; border: 2px solid #289afa; background: #fff; width: 240px; outline: 0; } body > div { padding: 1rem 0 0 1rem; } </style> </head> <body> <div> <div class="fancy-label"> <input type="text" id="username" required> <label for="username">用户名</label> </div> <div class="fancy-label"> <input type="text" id="password" required> <label for="password">密码</label> </div> </div> <h3>移动鼠标到输入框上查看组件效果</h3> </body> </html>