在HTML中添加搜索框通常是非常簡單明了的，只需要在HTML代碼中增加一個input標簽并賦給它相應的CSS樣式即可實現，這里我們就來講解一下如何在CSS中添加搜索框。

/* 定義搜索框的CSS樣式 */
.search-box {
position: relative; /* 讓搜索框相對定位 */
display: inline-block; /* 讓搜索框充滿整個父級 */
margin-right: 10px; /* 增加右邊距，方便和其他元素區分 */
}
/* 定義搜索框input的CSS樣式 */
.search-box input {
width: 200px; /* 定義搜索框的寬度 */
height: 30px; /* 定義搜索框的高度 */
padding: 0 10px; /* 增加內邊距，讓搜索文字距離輸入框有一定的距離 */
border: 1px solid #aaa; /* 定義搜索框的邊框 */
border-radius: 5px; /* 定義搜索框的圓角 */
font-size: 14px; /* 定義搜索框的字體大小 */
}
/* 定義搜索按鈕的CSS樣式 */
.search-box .search-btn {
position: absolute; /* 讓搜索框按鈕相對定位 */
top: 0; /* 把按鈕定位在搜索框上面 */
right: 0; /* 把按鈕定位在搜索框右邊 */
width: 60px; /* 定義搜索按鈕的寬度 */
height: 30px; /* 定義搜索按鈕的高度 */
background-color: #0099cc; /* 定義搜索按鈕的背景色 */
color: #fff; /* 定義搜索按鈕的字體顏色 */
border: none; /* 去掉搜索按鈕的邊框 */
border-radius: 0 5px 5px 0; /* 定義搜索按鈕的圓角 */
cursor: pointer; /* 把鼠標光標定義為手型，提醒用戶可以進行點擊操作 */
}

在CSS中設置好搜索框的樣式后，我們只需要在HTML代碼中使用對應的class名來調用CSS樣式即可，以下是HTML代碼：

搜索

在以上示例中，我們定義了一個名為search-box的div容器，其中包含了一個input標簽和一個button標簽，調用了我們上文中所定義的CSS樣式，這樣就實現了一個簡單的搜索框。