效果图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9f4304b5e320fed09df9cdaff2dbab07.gif)
代码展示
<el-form
:model="form"
:rules="rules"
ref="fromList"
:hide-required-asterisk="true">
<el-form-item prop="account">
<div class="input-data">
<el-input required="" v-model="form.account" autocomplete="on"></el-input>
<label>手机号/邮箱</label>
</div>
</el-form-item>
<el-form-item prop="pass">
<div class="input-data">
<el-input required="" v-model="form.pass" autocomplete="on"></el-input>
<label>密码</label>
</div>
</el-form-item>
<el-form>
.input-data{
width: 100%;
height: 40px;
position: relative;
}
:deep(.el-form){
.el-form-item{
margin-bottom: 62px;
}
.el-form-item__error{
font-size: 14px;
color: #F15151;
line-height: 1.7;
letter-spacing: 1px;
}
.el-input__inner{
padding: 0;
color: #FFFFFF;
width: 100%;
height: 40px;
border: none;
border-radius:0;
border-bottom: 1px solid silver;
font-size: 16px;
background: transparent;
}
.is-required.is-error .el-input__inner{
border:none !important;
border-bottom:1px solid #FFFFFF !important;
}
.input-data{
label{
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
letter-spacing: 1px;
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.el-input:has(> input:focus) ~ label,
.el-input:has(> input:valid) ~ label,
.el-input:has(>input:-webkit-autofill) ~ label{
transform: translateY(-30px);
font-size: 13px ;
}
}
}