在網頁設計中，搜索框是一個非常重要的組件，因為它可以極大地改善用戶體驗，使用戶能夠更快速和方便地查找到所需的信息。

為了使搜索框更符合網站的設計風格，我們可以使用CSS來手寫一些搜索框的樣式，下面我們來看一些常用的搜索框樣式：

/* 1.簡單的搜索框 */
.input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 10px;
outline: none;
width: 200px;
height: 30px;
}
/* 2.帶放大鏡圖標的搜索框 */
.input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 10px 5px 30px;
outline: none;
width: 200px;
height: 30px;
background: url('search.png') no-repeat 10px center;
}
/* 3.帶清空按鈕的搜索框 */
.input {
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px 10px 5px 30px;
outline: none;
width: 200px;
height: 30px;
background: url('search.png') no-repeat 10px center;
}
.input:hover {
border-color: #999;
}
.clearBtn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: url('clear.png') no-repeat;
cursor: pointer;
}
/* 4.帶動畫效果的搜索框 */
.input {
border: none;
border-bottom: 2px solid #ccc;
padding: 5px 10px;
outline: none;
width: 200px;
height: 30px;
transition: border-color 0.3s;
}
.input:focus {
border-color: #00bcd4;
}
.label {
position: absolute;
top: 0;
left: 10px;
padding: 0 5px;
background-color: #fff;
color: #00bcd4;
transition: top 0.3s,font-size 0.3s;
}
.input:focus + .label,
.input:not(:placeholder-shown) + .label {
top: -16px;
font-size: 14px;
}
/* 5.圓角搜索框 */
.input {
border: none;
border-radius: 30px;
padding: 5px 10px;
outline: none;
width: 200px;
height: 30px;
}
.input:focus {
border: none;
box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.14);
}

以上是一些常用的搜索框樣式，通過這些樣式可以讓搜索框更加美觀和實用，提升用戶體驗，進而提高網站的轉化率。