点击联系客服
客服QQ: 客服微信:

珠海老站长

查看: 466|回复: 50

通过CSS-学习-浮动placeholder 使注册不无聊!

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-10-1 07:27:43 | 显示全部楼层 |阅读模式
前言

登录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;
      }

最终的效果:

回复

使用道具 举报

1

主题

502

帖子

-202

积分

限制会员

积分
-202
发表于 2021-10-1 07:27:57 | 显示全部楼层
沙发!沙发!
回复

使用道具 举报

0

主题

499

帖子

-160

积分

限制会员

积分
-160
发表于 2021-10-1 07:49:44 | 显示全部楼层
难得一见的好帖
回复

使用道具 举报

0

主题

503

帖子

-192

积分

限制会员

积分
-192
发表于 2021-10-1 08:10:29 | 显示全部楼层
我是来刷分的,嘿嘿
回复

使用道具 举报

0

主题

492

帖子

-172

积分

限制会员

积分
-172
发表于 2021-10-1 08:30:35 | 显示全部楼层
有竞争才有进步嘛
回复

使用道具 举报

1

主题

510

帖子

-129

积分

限制会员

积分
-129
发表于 2021-10-1 08:50:47 | 显示全部楼层
前排支持下分享
回复

使用道具 举报

1

主题

522

帖子

-183

积分

限制会员

积分
-183
发表于 2021-10-1 09:10:58 | 显示全部楼层
小手一抖,积分到手!
回复

使用道具 举报

1

主题

501

帖子

-141

积分

限制会员

积分
-141
发表于 2021-10-1 09:31:23 | 显示全部楼层
学习了,不错,讲的太有道理了
回复

使用道具 举报

0

主题

487

帖子

-161

积分

限制会员

积分
-161
发表于 2021-10-1 09:51:28 | 显示全部楼层
学习了,谢谢分享、、、
回复

使用道具 举报

1

主题

505

帖子

-160

积分

限制会员

积分
-160
发表于 2021-10-1 10:12:11 | 显示全部楼层
写的真的很不错
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|无图版|手机版|小黑屋|珠海@IT精英团

GMT+8, 2022-7-3 16:09 , Processed in 0.170747 second(s), 24 queries .

Powered by Discuz! X3.4

© 2020 Comsenz Inc.

快速回复 返回顶部 返回列表