做一个 Material Design 风格的输入框

Hello，大家好，我是 Sunday。

最近有个同学让我帮他实现了一个 Material Design 设计风格的 输入框，咱们先来看下效果：

还算是好看的，复原程度也不错（自卖自夸了）

这种在国内的网站中很少见的输入框风格，就是 Material Design 的设计风格

Material Design 是由 Google 设计的视觉语言，代表 UI 库有：vuetify、MUI 等。不过这种 Design 在国内用的比较少，估计很多同学都不是很熟悉。

但是我们不得不说，这种设计在现在所有的设计都几乎一样的情况下，猛的看到还是非常有新鲜感的。

那么既然这个代码写出来，与其独享，不如分享给大家。

01：定义 HTML 部分

它的 HTML 并不复杂，有两部分组成：

1. input：表示输入框
2. label：表示 placeholder 提示文本

<div class="input-container">
    <input
        type="text"
        id="i-name"
        name="i-name"
        value=""
        aria-labelledby="label-name"
    />
    <label class="label" for="i-name" id="label-name">
        <div class="text">姓名</div>
    </label>
</div>

完成之后，大约是这样子：

02：定义 css 部分

整个 css 的定义分为 三步：

1. 把 label 放到 input 里面，这样就有了初始样式
2. 在 input 获取焦点时，让 label 颜色变化
3. 在 input 获得焦点时，增加动画

2.1 把 label 放到 input 里面

只需要调整 label 的位置即可：

.input-container {
  position: relative;
}

input {
  height: 48px;
  width: 280px;
  border: 1px solid #c0c0c0;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 16px;
}

.label {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  display: flex;
  align-items: center;
  /* 取消 label 的鼠标行为 */
  pointer-events: none;
}

2.2 改变 label 颜色

input:focus {
  outline: none;
  border: 2px solid blue;
}
input:focus + .label .text {
  color: blue;
}

2.3 增加动画

.label .text {
  transition: all 0.15s ease-out;
  color: grey;
}

input:focus + .label .text,
:not(input[value='']) + .label .text {
  font-size: 12px;
  transform: translate(0, -150%);
  background-color: white;
  padding-left: 4px;
  padding-right: 4px;
}

三步完成之后，就可以得到一个非常好看的输入框了。

但是，此时还有一个问题，就是 当输入框中由内容的时候，label 不应该下落，效果如下所示：

所以想要完成这最后一步，就需要通过 JS 来实现了

03：定义 JS 部分

我们可以通过如下代码 监听 input 的输入行为，把输入内容 同步到 input value 属性即可

const inputEle = document.getElementById('i-name')
inputEle.addEventListener('input', () => {
  inputEle.setAttribute('value', inputEle.value)
})

至此，整个效果完成。是不是并不复杂呢~~

前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。