<!DOCTYPE html> <html lang="zh-CN"> <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>Document</title> <style> #container { position: relative; width: 300px; border-bottom: #a6a7a7 1px solid; } #container>#username { height: 30px; width: 100%; padding: 1em 0.5em; box-sizing: border-box; border: none; outline: none; } #container>#username:valid+.line, #container>#username:focus+.line, #container>#username:hover+.line { width: 100%; } #container>#username:valid+.line+label, #container>#username:focus+.line+label, #container>#username:hover+.line+label { top: 0; transform: translateY(-100%); } #container>.line { height: 2px; width: 0; background: blue; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: 0.3s; } #container>label { position: absolute; top: 50%; transform: translateY(-50%); left: 0.5em; transition: 0.3s; font-size: 16px; } /*# sourceMappingURL=index.css.map */ </style> </head> <body> <br> <div id="container"> <input type="text" id="username" required> <span class="line"></span> <label for="username">User Name</label> </div> </body> </html>
CSS登录输入框简单练习
2023-08-01
68
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS登录输入框简单练习
目录
相关文章
|
3月前
|
3月前
|
3月前
|
容器
|
3月前
|
前端开发
UED
容器
|
3月前
|
前端开发
UED
|
5月前
|
前端开发
|
5月前
|
前端开发
UED
|
5月前
|
前端开发
|
5月前
|
前端开发
UED
|
6月前
|
PHP