html自动相加俩文本框的和,【HTML+CSS】input输入框内添加两个图标

web.jpg

如果input框中有一个图标的情况下可以采取给input设置背景图片的方式实现

input{

background: url("1.jpg") no-repeat 20px 20px

}

但是，如果一个input里面有左右两个图标的时候这种方式显然就不能实现了，如下图

input添加图片.png

如果想要实现这样的效果需要考虑另一种思路实现：采用图片定位的方式

具体代码如下：

注意：我是在react搭建环境下写的，所以里面用到了require语法，还有style是双括号的形式，如果不是在react环境下改一下写法就可以

//左边图标

//右边图标

//左边图标

.leftimg{

float: left;

width: 16px;

margin: 8px 25px;

}

//搜索框样式

.search{

position: absolute;

left:0px;

z-index:-1; //这里设置为-1，是为了让搜索框放在图片下方

width:84%;

height:30px;

padding-left: 10%;

border-radius: 5px;

color:#c9c9c9;

border:none;

margin: 0 3%;

background:#f6f6f6;

}

//右边图标

.rightimg{

float: right;

width: 15px;

margin: 8px 20px;

}