加一个小图标
<div class="userInput">
<input type="text" placeholder="请输入登录账号">
</div>
<div class="passwordInput">
<input type="text" placeholder="请输入登录密码">
</div>
<style>
.userInput input {
background: url(./imgs/userIcon.png) no-repeat;
background-position: 12px;
padding-left: 40px;
}
.passwordInput input {
background: url(./imgs/passwordIcon.png) no-repeat;
background-position: 12px
padding-left: 40px;
}
</style>
在input里加背景图 background-position设置背景图的位置
加两个小图标(使用position定位的方法)
<div class="password">
<img src="./imgs/passwordIcon.png" class="leftImg">
<input type="password" placeholder="请输入登录密码" class="passwordInput">
<img src="./imgs/expend.png" class="rightImg">
</div>
<style>
.password {
position: relative;
margin-top: 20px;
z-index: 1;
}
.passwordInput {
position: absolute;
box-sizing: border-box;
left: 0;
width: 440px;
height: 48px;
padding-left: 40px;
border: 1px solid #222222;
line-height: 22px;
font-size: 16px;
font-weight: 400;
color: #687177;
z-index: -1; //设置输入框在图标下层
}
.leftImg {
float: left;
margin: 16px 12px;
}
.rightImg {
float: right;
margin: 17px 12px;
cursor: pointer;
}
</style>