admin管理员组文章数量:1794759
html css输入框获得焦点、失去焦点效果
inputhtml style="color:#2aa0ea" target=_blank class=infotextkey>输入框获得焦点、失去焦点效果
废话shao shuo ! 直接看效果图，好吧！
效果图： code: <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style type="text/css"> *{margin:0;padding:0;} #box{width:200px;height:30px;border-bottom:1px solid #a8a8a8;margin:30px auto;position:relative;} #box .input{width:100%;height:100%;outline:none;border:none;font-size:16px;} #box .line{width:0px;height:2px;background:#00aeff;position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);transition:width 0.4s ease;} #box .placeh{position:absolute;left:4px;top:5px;transition:top 0.4s ease;color:#cbcbcb;} #box .placeh:hover{cursor:text;} #box .input:focus ~ .line{width:100%;} #box .input:focus ~ .placeh, #box .input:valid ~ .placeh{top:-26px;color:#00a2ff;} </style> </head> <body> <div id="box"> <input type="text" id="input" class="input" required > <span class="line"></span> <label class="placeh" for="input">Enter your account</label> </div> </body> <script> </script> </html>---- 结束 ---- 仅学习。
版权声明：本文标题：html css输入框获得焦点、失去焦点效果 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686973735a124221.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论