vue：仿百度样式搜索框
效果如图：
html代码如下：
<div class="box">
<div class="searchBox">
<input type="text" v-model="keyword" placeholder="请输⼊关键词进⾏搜索" class="searchInput" >                <input type="button"  @click="_search" value="搜索" class="searchButton">
</div>
</div>
css代码如下：
.box{
margin: 0 auto;
padding-top: 80px;
height: 50px;
width: 100%;
}
.searchBox{
margin: 0 auto;
width: 60%;
position: relative;
}
.
searchInput{
display: inline-block;
width: 85%;
height: 38px;
border: 1px solid #cccccc;
float: left;
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.searchButton{
display: inline-block;
width: 15%;
height: 38px;
line-height: 40px;
float: left;
background-color: #00a0e9;
font-size: 16px;
cursor: pointer;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
borderbox
border: none;
color: #fff;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。