#yyds干货盘点#可浮动placeholder，让你的登录不再枯燥！

​ 前言 在登录twitter的时候发现他的输入框的placeholder是可以浮动的。当输入框获取到焦点的时候，placeholder 会跑到上面去。我觉得这样的登录方式的好处是：可以减少一个label，同时往上浮动又可以保证用户在输入的时候知道输入什么内容。 pointer-events pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。 虽然pointer-events属性有*11 个*可能的值，但其中8个值都用于 SVG。任何 HTMl 元素的三个有效值是： none 阻止指定 HTML 元素上的所有单击、状态和光标选项 auto 默认功能 inherit 将使用pointer-events元素的父元素的值 pointer-events:auto; 穿透元素！ 允许单击或点击行为“穿过”一个元素到 Z 轴上它下面的另一个元素。 示例

我是在下面的文字，你双击试试。

当你双击的时候，下面的文字可以被选中。 浮动label 上面我们学习了pointer-events的用法。接着就回到正题，实现前言中的效果。 实现登录框

修改式样。将login-info设置为position: relative，同时设置label的位置，使他正好处于input框中。 到这一步我们还没有添加position-events:none; .login-form { position: absolute; width: 400px; padding: 40px; background: #fff; box-sizing: border-box; box-shadow: 0 15px 25px rgba(160, 149, 149, 0.432); border-radius: 10px; } .login-form h2 { margin: 0 0 30px; padding: 0; color:#000; text-align: center; } .login-form .login-info { position: relative; } .login-form .login-info input { width: 100%; padding: 10px 10px; font-size: 16px; color: #000; margin-bottom: 30px; border: none; border: 1px solid #000; outline: none; background: transparent; } .login-form .login-info label { position: absolute; top: 0; left: 0; padding: 10px 10px; font-size: 16px; color: rgb(15, 20, 25);; transition: 0.5s; } 添加input:focus的效果 .login-form .login-info input:focus ~ label { top: -20px; left: 0; color: rgb(29, 155, 240); font-size: 12px; z-index: 1; } .login-form .login-info input:focus{ border: 1px solid rgb(29, 155, 240); } 但是这样存在一个bug。当你鼠标点击输入用户名的时候，并不会发生任何效果，只有点击后面的空白处，label才会浮动。 pointer-events:none; 在label上设置pointer-events:none，穿透。 .login-form .login-info label { position: absolute; top: 0; left: 0; padding: 10px 10px; font-size: 16px; color: rgb(15, 20, 25);; pointer-events: none; transition: 0.5s; } 最终的效果：