CSS搜索框可清除，是指在輸入框的右側(cè)增加一個清除按鈕，讓用戶能夠一鍵清除已經(jīng)輸入的內(nèi)容。相信大家都用過類似的功能，可以說這是頁面優(yōu)化的一個重要體現(xiàn)。

我們可以借助偽元素:before和:after來實現(xiàn)清除按鈕的添加，同時利用偽元素的content屬性來添加一個清除圖標，如下代碼：

.clearable-input{
position: relative;
}
.clearable-input input{
padding-right: 30px;
}
.clearable-input:before{
font-family: 'FontAwesome';
content: '\f00d';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.clearable-input input::-ms-clear{
display: none;
}

在上面的代碼中，.clearable-input是一個自定義的類名，可以根據(jù)需求進行命名。其中，我們給input標簽增加了padding-right屬性，是為了給清除按鈕留出空間，避免按鈕與內(nèi)容發(fā)生重疊。在:before偽元素中，我們使用了FontAwesome字體庫中的f00d圖標，將其content屬性設(shè)置為清除圖標，這個圖標可以根據(jù)需求自行替換。position: absolute和right、top屬性的設(shè)置是為了將清除按鈕定位在輸入框右側(cè)。為了讓按鈕垂直居中，我們使用了transform: translateY(-50%)。最后，為了解決IE瀏覽器下默認的清除按鈕不兼容的問題，我們使用了input::-ms-clear偽類，將其display屬性設(shè)置為none。

使用上面的代碼，即可實現(xiàn)一個簡單的CSS搜索框可清除效果。當然，我們也可以通過JavaScript來實現(xiàn)類似的功能，但是借助CSS實現(xiàn)，可以避免一些兼容性問題。