zoukankan      html  css  js  c++  java
  • 占位符交互

    具体效果:输入框处于聚焦状态时,输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。

    <div class="input-box">
       <input class="input-control input-outline" placeholder="账号">
       <label class="input-label">账号</label>
    </div>
    

      

     

    首先,让浏览器默认的placeholder效果不可见

    .input-control:placeholder-shown::placeholder {
        color: transparent;
    }
     

    第二,使用.input-label元素代替浏览器原声的占位符

    .input-box{
      position: relative;
    }
    .input-label {
      position: absolute;
      left: 16px; top: 14px;
      pointer-events: none;
    }
     

      

     

    最后,在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位,效果是缩小并移动到上方

    .input-control:not(:placeholder-shown) ~ .input-label,
    .input-control:focus ~ .input-label {
      color: #2486ff;
      transform: scale(0.75) translate(-2px, -32px);
    }
     
    效果如下:

    作者:zhangwinwin
    链接:https://juejin.cn/post/6934887428616355847
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    [转]
    Linux
    [转]
    [转]
    Linux 高级网络编程
    [转]
    [译]- 6-1 排列窗体上的控件(Laying Out Widgets on a Form)
    [转]
    [转]
    the thread has exited with code -1073741819
  • 原文地址:https://www.cnblogs.com/fhysy/p/14478206.html
Copyright © 2011-2022 走看看