CSS :placeholder-shown伪类实现Material Design占位符交互效果

https://www.zhangxinxu.com/wordpress/2018/12/css-placeholder-shown-material-design/

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>页面标题</title> <style> body{padding-left: 20%;padding-top: 20%;} h4{margin-bottom: .75em;margin-top: 1.33em;} .input-fill-x, .input-outline-x, .textarea-outline-x { /* fit-content见文章：https://www.zhangxinxu.com/wordpress/?p=5392 */ width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; } .input-fill-x { border-bottom: 1px solid #d0d0d5; } .input-fill-x::after { content: ''; position: absolute; border-bottom: 2px solid #2486ff; left: 0; right: 0; bottom: -1px; transform: scaleX(0); transition: transform .25s; } /* :focus-within见文章：https://www.zhangxinxu.com/wordpress/?p=7327 */ .input-fill-x:focus-within::after { transform: scaleX(1); } .input-control { margin: 0; font-size: 16px; line-height: 1.5; outline: none; } .input-fill { padding: 20px 16px 6px; border: 1px solid transparent; background: #f5f5f5; } .input-outline, .textarea-outline { padding: 13px 16px 13px; border: 1px solid #d0d0d5; border-radius: 4px; transition: border-color .25s; } .input-outline:focus, .textarea-outline:focus { border-color: #2486ff; } /* 默认placeholder颜色透明不可见 */ .input-control:placeholder-shown::placeholder { color: transparent; } .input-label { position: absolute; font-size: 16px; line-height: 1.5; left: 16px; top: 14px; color: #a2a9b6; padding: 0 2px; transform-origin: 0 0; pointer-events: none; transition: all .25s; } /* 线框样式label定位 */ .input-control:not(:placeholder-shown)~.input-label, .input-control:focus~.input-label { color: #2486ff; transform: scale(0.75) translate(-2px, -32px); } /* 填充样式下label定位 */ .input-fill:not(:placeholder-shown)~.input-label, .input-fill:focus~.input-label { transform: scale(0.75) translateY(-14px); } /* 线框交互下有个白色背景 */ .input-outline~.input-label, .textarea-outline~.input-label { background-color: #fff; } </style> </head> <body> <h4>填充风格</h4> <div class="input-fill-x"> <input class="input-control input-fill" placeholder="邮箱"> <label class="input-label">邮箱</label> </div> <h4>轮廓风格</h4> <div class="input-outline-x"> <input class="input-control input-outline" placeholder="邮箱"> <label class="input-label">邮箱</label> </div> <h4>文本域</h4> <div class="textarea-outline-x"> <textarea class="input-control textarea-outline" cols="25" rows="3" placeholder="评论"></textarea> <label class="input-label">评论</label> </div> </body>  <script> </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » CSS :placeholder-shown伪类实现Material Design占位符交互效果