在input框之前添加图片,想到了三种方法。
- 第一种,添加input背景图片,实现起来很简单
<input type="password" name="password" id="password" value="" /><br />
#password{
width: 200px;
height: 35px;
outline: none;
border: 1px solid blue;
background: url(https://s2.ax1x.com/2019/04/04/A2iVgA.png) no-repeat 5%;
background-size: 25px 25px;
}
-
第二种,在input框外部添加图片,再通过样式调整位置。比较麻烦。而且位置设置不灵活。详细设置点击
-
第三种是我自己想的,代码如下:
<div id="">
<span id="img">密码:</span>
<input type="text" name="password" id="password" value="" />
</div>
#img{
width: 73px;
height: 26px;
background: url(img/pass02.svg) no-repeat right;
display: inline-block;
}