在網頁設計中，搜索框是一個非常重要的元素。而隨著用戶交互的增加，搜索框的功能也越來越強大。其中，搜索框的聚焦和清除功能很常見，今天我們就來講講如何使用CSS來實現搜索框的聚焦和清除功能。
首先，我們需要對搜索框進行一些基礎的樣式設置。我們可以使用CSS中的輸入框樣式來設置搜索框的樣式，如下所示：

input[type="text"] {
width: 200px;
height: 30px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
}

以上代碼中，我們設置了搜索框的寬度、高度、內邊距、圓角半徑以及邊框樣式。
接著，我們來實現搜索框的聚焦功能。當我們點擊搜索框時，搜索框會獲得焦點，并且搜索框的顏色等樣式也會發生改變。我們可以使用:focus偽類來實現這個功能，如下所示：

input[type="text"]:focus {
outline: none;
border: 1px solid #3e8e41;
box-shadow: 0 0 5px #3e8e41;
}

以上代碼中，我們使用了:focus偽類來選中了輸入框，并設置了獲得焦點時的邊框樣式和陰影效果。這里的box-shadow是添加了一個陰影效果，主要起到美化的作用，可以根據自己的需求添加或刪除。
最后，我們來實現搜索框的清除功能。當我們輸入內容后，如果不需要這些內容，可以點擊一個“x”按鈕來清空內容。我們可以借助偽元素和CSS3動畫來實現這個按鈕的效果，如下所示：

input[type="text"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-right: 5px;
background: url('cancel.png') no-repeat;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
}
input[type="text"]:valid::-webkit-search-cancel-button {
opacity: 1;
transition: all 0.3s ease;
}

以上代碼中，我們使用了偽元素::webkit-search-cancel-button來選中了搜索框的取消按鈕，并設置了按鈕的一些樣式。同時，我們也使用了偽類:valid來判斷輸入框的內容是否為空，如果不為空，就將取消按鈕的opacity屬性設置為1，同時也啟動了一個過渡效果，以實現漸變顯示的效果。
綜上所述，通過上面的設置，我們成功地實現了搜索框的聚焦和清除功能。這對用戶來說，是一種非常友好的交互方式，也能夠增強網站的易用性和用戶體驗。