CSS 輸入框的清空是一個非常常見的需求，在用戶需要重新輸入內容的時候，通常會希望能夠快速地清空輸入框的內容。下面我們來介紹如何使用 CSS 來實現清空功能。

/* 清空按鈕的樣式 */
.clear-btn {
position: absolute; /* 絕對定位 */
top: 50%; /* 垂直居中 */
right: 10px; /* 距離右側 10px */
transform: translateY(-50%); /* 垂直居中 */
width: 20px; /* 寬度 */
height: 20px; /* 高度 */
background-image: url(clear.png); /* 圖片背景 */
background-size: cover; /* 圖片自適應 */
cursor: pointer; /* 鼠標指針 */
opacity: 0; /* 初始透明度為0 */
transition: opacity 0.2s ease-in-out; /* 漸變動畫 */
}
/* 輸入框獲取焦點時，顯示清空按鈕 */
input:focus + .clear-btn {
opacity: 1;
}
/* 點擊清空按鈕，清空輸入框內容 */
.clear-btn:hover {
background-color: rgba(0, 0, 0, 0.2); /* 鼠標懸停樣式 */
}
.clear-btn:active {
background-color: rgba(0, 0, 0, 0.4); /* 鼠標按下樣式 */
}
.clear-btn:focus {
outline: none; /* 清除聚焦樣式 */
}

上面的代碼中，我們首先定義了一個清空按鈕的樣式，其中包括了絕對定位、垂直居中、背景圖片、鼠標指針、透明度等屬性。接下來，當輸入框獲取焦點時，我們使用了相鄰兄弟選擇器（+）來選中清空按鈕，并將其透明度設置為 1，從而實現了顯示效果。最后，我們還針對清空按鈕的鼠標懸停、按下和聚焦事件進行了樣式定義，以增強交互體驗。