當前，有越來越多的網站在搜索框中加入清除文本的功能，以提高用戶體驗。在這篇文章中，我們將介紹如何使用CSS來實現搜索框點擊清除文字的效果。 首先，我們需要為搜索框添加一個清除按鈕。我們可以使用偽元素:before來實現，代碼如下：

input[type="text"]::before {
content: "X";
color: gray;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}

我們使用絕對定位將按鈕放在搜索框的右側，并使其在垂直方向上居中對齊。然后，我們使用translateY(-50%)將按鈕在垂直方向上上下移動50%的高度以使其完全居中。最后，我們將光標設置為指針，以指示該元素是可點擊的。 接下來，我們需要為按鈕添加交互效果。當用戶點擊該按鈕時，需要清空搜索框中的文本。下面是我們可以使用CSS為按鈕添加清除效果的代碼：

input[type="text"]:not(:focus)::-ms-clear {
display: none;
}
input[type="text"]:not(:focus)::-webkit-search-cancel-button {
-webkit-appearance: none;
}
input[type="text"]:not(:focus)::-webkit-clear-button {
display: none;
}
input[type="text"]:focus::-webkit-search-cancel-button,
input[type="text"]:focus::-webkit-clear-button {
-webkit-appearance: initial;
appearance: initial;
opacity: 1;
pointer-events: auto;
}

我們使用:not(:focus)選擇器來確保只有在未獲得焦點時才隱藏清除按鈕。然后，我們使用display:none來隱藏Microsoft Edge中的清除按鈕。接下來，我們使用-webkit-appearance:none來隱藏Safari和Chrome中的取消按鈕。 對于Firefox，我們不需要做任何事情，因為它默認情況下沒有顯示清除按鈕。但對于IE和Edge，我們需要隱藏它，因為它會增加搜索框的寬度。 最后，我們使用:focus偽類選擇器來設置在聚焦狀態下顯示清除按鈕。我們使用appearance屬性使清除按鈕可見，并將pointer-events設置為auto以確保按鈕可以被單擊。 總之，在使用搜索框時，我們可以為其添加一個清除按鈕，使用CSS使其具備交互效果，從而為用戶帶來更好的體驗。