CSS中的搜索框是網頁設計中常見的元素之一，能夠為用戶提供方便的搜索功能。下面介紹幾種搜索框樣式的實現方法。

/*樣式一：簡單的搜索框*/
input[type="text"] {
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
/*樣式二：帶圖標的搜索框*/
.search-box {
position: relative;
display: inline-block;
margin: 0 auto;
}
.search-box input[type="text"] {
padding: 10px 20px 10px 40px;
border: none;
border-bottom: 2px solid #ddd;
}
.search-box .search-icon {
position: absolute;
top: 10px;
left: 10px;
}
/*樣式三：扁平化風格的搜索框*/
.search-bar {
width: 100%;
background-color: #f9f9f9;
height: 60px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
position: relative;
}
.search-box input[type="text"] {
width: 100%;
height: 40px;
padding: 10px 20px;
border-radius: 20px;
border: none;
background-color: #f9f9f9;
box-shadow: none;
outline: none;
font-size: 18px;
color: #5c5c5c;
}
/*樣式四：帶下拉框的搜索框*/
.select-box{
padding-top:5px;
position:relative;
}
.select-box select{
width:210px; 
height:34px;
border:none; 
background-color:#ffffff;
-webkit-appearance:none;
}
.select-box select::-ms-expand{ 
display: none; 
}
.select-btn{
width:40px; 
height:34px;
position:absolute; 
top:0; 
right:0; 
padding:0px;margin:0px; 
background-color:#ffffff;
border:none; 
border-left:1px solid #e6eaee;
text-align:center; 
line-height:34px;
}
.select-btn i{
display:block;
font-style: normal;
font-size:15px;
font-weight:normal;
color:#333333;
}

以上是幾種常見的搜索框樣式，當然還可以根據自己的需求進行修改，比如調整樣式的顏色、字體大小等。希望這篇文章能夠對您的CSS學習有所幫助。