一个由H5+CSS3实现带图标的搜索框
效果图
H5:
<div class="wx-index">
<div class="wx-index-search">
<div class="icon"><img src="./search.png" class="search-icon" /></div>
<input v-model="search" placeholder="口腔溃疡" />
</div>
</div>
Css3
.wx-index {
font-size: 16px;
padding: 10px 16px;
margin: 2px 0;
.wx-index-search {
display: flex;
height: 40px;
border: 1px solid #eaeaea;
-webkit-box-shadow: 0px 5px 5px #f5f5f5;
-moz-box-shadow: 0px 5px 5px #f5f5f5;
box-shadow: 0px 5px 5px #f5f5f5;
border-radius: 20px;
.icon {
width: 30px;
margin: 5px;
height: 40px;
line-height: 40px;
text-align: center;
.search-icon {
width: 20px;
height: 20px;
color: #e4e4e4;
}
}
input {
flex: 1;
width: 100%;
border: 0;
outline: none; // 去除选中状态边框
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
background-color: transparent;
cursor: text;
margin: 0em;
padding: 10px 0 10px 0;
overflow: hidden;
}
}
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: #e2e2e2;
font-size: 16px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #e2e2e2;
font-size: 16px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #e2e2e2;
font-size: 16px;
}