效果:
在输入框内加入小图标,主要有两种方法
一、使用标签<i>存放图标,利用绝对定位调整位置,图标图层需要在input之上
二、在input内直接使用背景图片放在图标,利用background-position调整位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框小图标</title>
<style type="text/css">
.box01{
color: #434343;
position: relative;
margin-bottom: 20px;
}
.box01 input{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none ;
outline: 0;
width: 270px;
height: 30px;
border:0px solid #fff;
border-radius: 20px;
box-shadow:0 0 5px 2px rgba(0,0,0,0.1);
padding: 0 30px 0 15px;
}
.box01 label{
font-size: 16px;
z-index: 2;
position: absolute;
left: 109px;
top:15%;
color: #b2b2b2;
}
/*利用<i>来安放图标*/
.icon{
display: inline-block;
height: 16px;
width: 16px;
background-image: url(search.svg);/*这里放置图标的绝对路径*/
background-repeat: no-repeat;
position: absolute;
top: 24%;
left: 290px;
z-index: 2;
}
/*利用背景图片安放图标*/
#tip02{
padding: 0 10px 0 35px;
background-image: url(search.svg);
background-repeat: no-repeat;
background-position: 10px 7px;
}
</style>
</head>
<body>
<div class="box01">
<input type="text" id="tip" placeholder="搜索你喜欢的">
<i class="icon"></i>
</div>
<div class="box01"><input type="text" id="tip02" placeholder="fine your need"></div>
</body>
</html>