|
|
前言
登录Twitter时发现他的文本框的placeholder可以浮动。输入框获得焦点时，placeholder向上跑。这种登录方式的优点是，可以减少label，同时向上浮动，这样用户输入时就知道要输入什么。
pointer-events
Pointer-events属性设置HTML元素响应鼠标/触摸事件/单击/单击事件的方式以及光标是否可见。
Pointer-events属性有11个可能的值，但其中8个用于SVG。所有HTMl元素的三个有效值如下：
None阻止指定HTML元素的所有单击、状态和光标选项自动默认功能inherit使用pointer-events元素的父元素值pointer-events:auto; 穿透元素！
点击或单击动作可以将一个元素“穿过”到z轴下的另一个元素。
示例
P.
我是下面的文章。请双击。
/p
无法识别DIV Class=‘events-none’鼠标的双击/div
双击可以选择下面的文字。
浮动label
在上面，我们学习了pointer-events的用法。然后回到正题，实现前言的效果。
实现登录框
Div类=' login-form '
H2登录/h2
Form
Div类=' login-info '
input type=' text ' name=' ' required='/
输入Label用户名/label
/div
Div类=' login-info '
input type=' password ' name=' ' required=' '/
请输入Label密码/label
/div
/form
/div
修改风格。将Login-info设置为position: relative，并设置标签位置
f0c;使他正好处于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;
}
最终的效果：
 |
|
发表于 2021-10-1 07:27:43
