Vue+ElementUI 之 input输入框添加自定义图片

最新推荐文章于 2024-09-13 09:04:16 发布

luanluan8888

最新推荐文章于 2024-09-13 09:04:16 发布

阅读量6k

点赞数 2

分类专栏： Vue 文章标签： css html vue web

本文链接：https://blog.csdn.net/luanluan8888/article/details/114020288

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

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;
}