Hello,大家好,我是 Sunday。
最近有个同学让我帮他实现了一个 Material Design 设计风格的 输入框,咱们先来看下效果:
还算是好看的,复原程度也不错(自卖自夸了)
这种在国内的网站中很少见的输入框风格,就是 Material Design 的设计风格
Material Design 是由 Google 设计的视觉语言,代表 UI 库有:vuetify、MUI 等。不过这种 Design 在国内用的比较少,估计很多同学都不是很熟悉。
但是我们不得不说,这种设计在现在所有的设计都几乎一样的情况下,猛的看到还是非常有新鲜感的。
那么既然这个代码写出来,与其独享,不如分享给大家。
01:定义 HTML 部分
它的 HTML 并不复杂,有两部分组成:
- input:表示输入框
- 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 的定义分为 三步:
- 把 label 放到 input 里面,这样就有了初始样式
- 在 input 获取焦点时,让 label 颜色变化
- 在 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)
})
至此,整个效果完成。是不是并不复杂呢~~