搜索框是網(wǎng)站常用的一個(gè)功能，而HTML5和CSS提供了很多樣式豐富的搜索框樣式。下面我們來看幾種常用的搜索框樣式。

<!-- 第一種樣式：圓角搜索框 -->
<form class="search-form">
<input type="text" class="search-input" placeholder="Search...">
<button type="submit" class="search-button"><i class="fa fa-search"></i></button>
</form>
.search-form {
display: inline-block;
}
.search-input {
padding: 10px;
border: none;
border-radius: 25px;
}
.search-button {
background-color: #428bca;
border: none;
border-radius: 25px;
color: #fff;
padding: 10px;
margin-left: -50px;
cursor: pointer;
}
<!-- 第二種樣式：扁平搜索框 -->
<form class="search-form2">
<input type="text" class="search-input2" placeholder="Search...">
<button type="submit" class="search-button2"><i class="fa fa-search"></i></button>
</form>
.search-form2 {
display: inline-block;
}
.search-input2 {
padding: 10px;
border: none;
background-color: #f1f1f1;
width: 300px;
}
.search-button2 {
background-color: #428bca;
border: none;
color: #fff;
padding: 10px;
cursor: pointer;
}
<!-- 第三種樣式：動(dòng)態(tài)搜索框 -->
<form class="search-form3">
<input type="text" class="search-input3" placeholder="Search...">
<button type="submit" class="search-button3"><i class="fa fa-search"></i></button>
</form>
.search-form3 {
display: inline-block;
}
.search-input3 {
padding: 10px;
border: none;
border-right: 1px solid #ccc;
width: 300px;
}
.search-button3 {
background-color: #428bca;
border: none;
border-radius: 0 25px 25px 0;
color: #fff;
padding: 10px;
cursor: pointer;
}

這些搜索框樣式僅供參考，具體還要根據(jù)實(shí)際需求和設(shè)計(jì)風(fēng)格來選擇合適的樣式。