Vue+ElementUI 之 input输入框 添加自定义图片
Vue+ElementUI 之 input输入框 添加自定义图片效果图如图:<el-form ref="formData" :model="formData" label-width="80px" style="padding-top: 70px;" class="loginForm"><el-form-item><el-input class="username"
·
Vue+ElementUI 之 input输入框 添加自定义图片
效果图如图:
<el-form ref="formData" :model="formData" label-width="80px" style="padding-top: 70px;" class="loginForm">
<el-form-item>
<el-input class="username" type="text" v-model="formData.USERNAME" autocomplete="off" placeholder="请输入用户名" />
</el-form-item>
<el-form-item>
<el-input class="password" type="text" v-model="formData.PASSWORD" autocomplete="off" placeholder="请输入密码" />
</el-form-item>
</el-form>
.username .el-input__inner{
/*no-repeat:图片不重复;10px:控制图片左边距 center:图片上下居中*/
background:url(../img/user.png) no-repeat 10px center;
padding: 0px 50px; /*输入内容左右边距控制*/
width: 534px;
height: 66px;
font-size: 23px;
color: #dadada;
}
.password .el-input__inner{
background:url(../img/pass.png) no-repeat 10px center;
padding: 0px 50px;
width: 534px;
height: 66px;
font-size: 23px;
color: #dadada;
}
更多推荐
已为社区贡献2条内容
所有评论(0)