最近写B/S项目比较忙,很久没更新,今天分享一个B/S比较常见的带图片的搜索框代码。希望可以对你们有所帮助。
效果图先展示一下:
图片用的是阿里巴巴矢量图标库的图,需要用到的话,直接拷贝到代码里面就可以用了。
话不多说,上代码:
html:
<div class="wx-index">
<div class="wx-index-search">
<div class="icon">
<svg t="1659685131507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2555" width="32" height="32"><path d="M454.656 849.92C231.424 849.92 51.2 668.672 51.2 445.44 51.2 223.232 231.424 41.984 454.656 41.984c222.208 0 403.456 181.248 403.456 403.456C858.112 668.672 676.864 849.92 454.656 849.92z m0-746.496C266.24 103.424 112.64 257.024 112.64 445.44s153.6 342.016 342.016 342.016 342.016-153.6 342.016-342.016-153.6-342.016-342.016-342.016z" fill="#4C4C4C" p-id="2556"></path><path d="M942.08 1008.64c-12.288 0-23.552-4.096-32.768-13.312L737.28 822.272c-18.432-18.432-18.432-47.104 0-65.536s47.104-18.432 65.536 0l172.032 172.032c18.432 18.432 18.432 47.104 0 65.536-9.216 9.216-20.48 14.336-32.768 14.336z" fill="#FFA028" p-id="2557"></path></svg>
</div>
<input v-model="search" placeholder="搜索" />
</div>
</div>
css部分:
<style type="text/css">
.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: 3px 8px;
/* 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;
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;
margin-left: 5%;
}
::-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;
}
</style>