CSS可以用來制作漂亮實用的搜索框。下面我們來看一些關于CSS搜索框的例子。

/* CSS搜索框樣式 */
.search-box {
position: relative;
width: 100%;
}
.search-box input[type="text"] {
width: 100%;
padding: 10px;
border-radius: 5px;
box-shadow: none;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
.search-box input[type="submit"] {
position: absolute;
right: 0;
top: 0;
color: #fff;
background-color: #2196F3;
border: none;
padding: 10px 15px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

以上CSS代碼展示了一個簡單的搜索框布局樣式。需要將輸入框和提交按鈕置于同一個搜索框容器中。為了確保輸入框的大小和形狀，選擇器被設置為'input[type="text"]'。

在上述例子中，直接應用了基本的樣式，包括邊框、陰影和填充等。通過添加著色、背景或動畫等效果，可以使搜索框更加生動有趣。

以下是一個使用CSS漸變和動畫效果的搜索框例子：

/* CSS搜索框樣式 - 使用漸變色 */
.search {
display: flex;
flex-direction: row;
justify-content: center;
}
.search input[type="text"] {
background: linear-gradient(#8684ff, #faff00);
border: none;
border-radius: 30px;
font-size: 18px;
color: #fff;
padding: 10px 20px;
width: 200px;
transition: width 0.5s;
}
.search input[type="text"]:focus {
width: 300px;
cursor: pointer;
}

這個搜索框使輸入框獲得了一個獨特的漸變背景。 當用戶聚焦到輸入框上時，它的寬度會擴展到300px，并伴有過渡效果。

CSS可以讓設計人員更加靈活地制作搜索框效果，通過添加顏色、形狀和動態效果，可以使搜索框更加生動有趣，吸引用戶的注意。