可浮动placeholder,让你的登录不再枯燥

可浮动placeholder,让你的登录不再枯燥前言在登录twitter的时候发现他的输入框的placeholder是可以浮动的。当输入框获取到焦点的时候,placeholder会跑到上面去。我觉得这样的登录方式的好处是:可以减少一个label,同时往上浮动又可以保证用户在输入的时候知道输入什么内容。pointer-eventspointer-events属性设置HTML元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。虽然pointer-events属性有11个可能的值,但其中8个值都用于SVG。任何HTMl元素的三个

大家好,又见面了,我是你们的朋友全栈君。

大家好,我是半夏?,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 ? 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师~关注公众号:搞前端的半夏,了解更多前端知识! 点我探索新世界!

原文链接 ==>http://sylblog.xin/archives/69

前言

在这里插入图片描述

pointer-events

pointer-events属性设置 HTML 元素如何响应鼠标/触摸事件/单击/点击事件以及光标是否可见。
虽然pointer-events属性有11 个可能的值,但其中8个值都用于 SVG。任何 HTMl 元素的三个有效值是:

  • none 阻止指定 HTML 元素上的所有单击、状态和光标选项
  • auto 默认功能
  • inherit 将使用pointer-events元素的父元素的值

pointer-events:auto; 穿透元素!

允许单击或点击行为“穿过”一个元素到 Z 轴上它下面的另一个元素。

示例


    <p>
      我是在下面的文字,你双击试试。
    </p>
    <div class="events-none">我无法识别鼠标的双击</div>

当你双击的时候,下面的文字可以被选中。
在这里插入图片描述

浮动label

上面我们学习了pointer-events的用法。接着就回到正题,实现前言中的效果。

实现登录框

    <div class="login-form">
      <h2>登录</h2>
      <form>
        <div class="login-info">
          <input type="text" name="" required=""/>
          <label>请输入用户名</label>
        </div>
        <div class="login-info">
          <input type="password" name="" required="" />
          <label>请输入密码</label>
        </div>
      </form>
    </div>

修改式样。将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;
      }

最终的效果:

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158359.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • FindWindowEx函数

    FindWindowEx函数当你想控制一个现有的窗口程序时,就需要获取那个程序的窗口句柄。比如有一些黑客软件需要查找到窗口,然后修改窗口的标题。在外挂流行的今天,惊奇地发现它们也可以修改输入窗口的文字。这其中,就需要使用到FindWindowEx函数来定位窗口。下面就来使用这个函数来实现控制Windows里带的计算器程序。打开计算器程序,最小化在状态下面,运行本例子,点击创建按钮后,就可以点按钮,就会把计算器显示在最前面。

  • 通过manageMarket管理插件来激活IDEA(在线激活)

    通过manageMarket管理插件来激活IDEA(在线激活),https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • 关于语法运用的一些其他问题

    关于语法运用的一些其他问题

  • Android n_android 反编译

    Android n_android 反编译androidN编译,可能会遇到问题,有三点相关,jdk配置不对、jack开启/运行失败、jack_vm_args。

  • 独立成分分析ICA系列1:意义

    独立成分分析ICA系列1:意义1.前言独立成分分析思想和方法最早源于上世纪八十年代几个法国学者的研究工作,尽管当时他们并没有命名其为ICP;在1986年举行的神经网络计算会议上,法国学者Heraull和Jutten提出了一个基于神经网络模型和Hebb学习准则的方法,来解决盲源分离问题,简称BSS.混合信号是由相互统计独立的源信号混合而成的。这篇文章提出的算法可以解决具有两个源信号混合的盲源分离问题。他们的工作开

  • python2.7安装matplotlib_Matplotlib安装

    python2.7安装matplotlib_Matplotlib安装Matplotlib安装教程有很多不同的方法来安装matplotlib,最好的方法取决于你正在使用什么操作系统,你已经安装了什么,以及如何使用它。为了避免在此页面上浏览所有细节(和潜在的并发症),有几个方便的选择。安装预建的软件包大多数平台:科学的Python发行第一个选择是使用已经提供matplotlib内置的预包装的python发行版之一。Continuum.ioPython发行版(Anac…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号