搜索欄是網(wǎng)站中常見的功能之一，而CSS能夠很好地為其進(jìn)行樣式設(shè)計(jì)。下面就來介紹一下如何使用CSS制作搜索欄。

/* CSS代碼開始 */
.search-bar {
box-sizing: border-box;
position: relative;
}
.search-bar input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.search-bar button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
font-size: 16px;
}
.search-bar button:hover {
cursor: pointer;
background-color: #0056b3;
}
/* CSS代碼結(jié)束 */

首先，在 HTML 中創(chuàng)建一個(gè)包含輸入框和搜索按鈕的元素，比如 div 元素，并給其添加一個(gè)類名 "search-bar"。然后，可以在 CSS 中添加以下代碼：

/* CSS中的box-sizing屬性被用來確保輸入框的寬度包含了邊框和內(nèi)邊距，不會(huì)超出容器的寬度 */
.search-bar {
box-sizing: border-box;
position: relative;
}
/* 創(chuàng)建輸入框 */
.search-bar input {
width: 100%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
/* 創(chuàng)建搜索按鈕 */
.search-bar button {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 0 5px 5px 0;
font-size: 16px;
}
/* 鼠標(biāo)懸浮時(shí)改變按鈕樣式 */
.search-bar button:hover {
cursor: pointer;
background-color: #0056b3;
}

以上代碼中，使用了 position: relative 屬性定位 .search-bar 元素，使得內(nèi)部的輸入框和搜索按鈕可以相對(duì)于它進(jìn)行絕對(duì)定位。在輸入框樣式中，使用了 box-sizing 屬性確保輸入框?qū)挾炔粫?huì)超出容器；在搜索按鈕樣式中，使用了 border-radius 實(shí)現(xiàn)圓角，并通過 right 定位實(shí)現(xiàn)搜索按鈕固定在輸入框的右邊。最后，在鼠標(biāo)懸浮時(shí)，改變按鈕的背景色，增加一些交互性。

通過以上代碼，我們便可以輕松地制作一個(gè)漂亮的搜索欄。