CSS 仿谷歌input输入框,失焦时标题在输入框中,聚焦标题上移

CSS 专栏收录该内容
5 篇文章 0 订阅

问题

由于中英文国际化问题,导致表单中input输入框前的标题长度不一。

表单input布局一般有两种方式,一种是左右结构,一种是上下结构。

上下结构能够很好地解决标题国际化切换导致的长短不一的问题,代价是牺牲页面高度。

需求

优化上下结构表单。

谷歌登录表单有种效果:input未输入时,标题显示在输入框中,输入之后,标题上移。如果输入框有内容,则失焦后标题位置仍然在上方。

实现

使用html5的<fieldset>和与之搭配的<legend>标签可以方便完成表单标题的位置,使用transform来控制标题位置的变化,搭配input实现输入效果。

使用transform移动legend到input之上会把input的点击覆盖掉,所以在legend中使用label的for属性将点击事件转移到input上。

之后再通过css cursor: text; 使鼠标移动到legend时,变成竖线。

由于css无法判断input中是否有内容,则使用类似css:active伪类并不能实现。所以需要借助js的onfocus/onblur事件来完成。

代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inline Input</title>
</head>
<style>
  body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .input-outer{
    position:relative;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 2px solid #ddd;
    padding: 0;
    color: #aaa;
  }
  .input-inner{
    border: none;
    height: 30px;
    padding: 0 5px;
    outline: none;
  }
  .input-outer legend{
    line-height: 14px; /*设置行高,防止因为字体缩放导致元素高度变化*/
    font-size: 14px;
    transform: translate3d(6px,22px,0); /*标题平移至合适位置*/
    transition: all .2s ease;
  }
  .input-outer legend label{cursor: text;}
  .input-outer.active{
    /* border-top: 2px solid #409EFF;
    border-left: 2px solid #409EFF;
    border-right: 2px solid #409EFF; */
    border-bottom: 2px solid #409EFF;
  }
  .input-outer.active legend{
    font-size: 12px;
    color:#409EFF;
    transform: translate3d(0,0,0);
  }
</style>
<body>
  <fieldset id="inputOuter" class="input-outer">
    <input id="inputInner" class="input-inner" type="text">
    <legend><label for="inputInner">Title</label></legend>
  </fieldset>
</body>
<script>
  let inputInner = document.querySelector('#inputInner')
  let outInput = document.querySelector('#inputOuter')
  inputInner.addEventListener('focus', (e) => {
    outInput.classList.add('active');
  })
  inputInner.addEventListener('blur',(e) => {
    if(!inputInner.value) // input失焦时如果无内容则移除active class
      outInput.classList.remove('active');
  })
</script>
</html>

效果

效果gif

 

后续

用div>label+input也可以实现这种效果。好像没必要使用fieldset。如果有边框的话那就只能fieldset了

fieldset加左padding:

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值