我們在網頁中經常需要為input輸入框增加“清空”按鈕，以方便用戶快速清空輸入框內容。本文將介紹如何使用 CSS 實現此功能。 在 HTML 中，我們可以使用如下代碼創建一個輸入框和一個清空按鈕：

清空

接下來，我們需要定義 CSS 來實現點擊清空按鈕則清空輸入框內容的效果。首先，我們需要將清空按鈕的樣式設為 inline-block，以便讓它與輸入框橫向排列：

#clearBtn {
display: inline-block;
}

然后，我們需要使用 JavaScript 來監聽清空按鈕的點擊事件，以及清空輸入框的內容。注意，此處我們在 HTML 中為清空按鈕添加了 id 屬性為 clearBtn，在 JavaScript 中可以使用 document.getElementById("clearBtn") 獲取該按鈕的節點對象：

document.getElementById("clearBtn").onclick = function() {
document.getElementById("inputBox").value = "";
};

以上代碼的作用是：在清空按鈕被點擊時，獲取 id 為 inputBox 的輸入框節點對象，然后將其 value 屬性設為空字符串，即清空輸入框內容。 最后，我們還可以為清空按鈕添加一些基礎的樣式美化：

#clearBtn {
display: inline-block;
border: none;
outline: none;
font-size: 14px;
cursor: pointer;
color: #fff;
background-color: #00bcd4;
padding: 6px 10px;
}
#clearBtn:hover {
background-color: #0097a7;
}

完整代碼如下所示：

清空

#clearBtn {
display: inline-block;
border: none;
outline: none;
font-size: 14px;
cursor: pointer;
color: #fff;
background-color: #00bcd4;
padding: 6px 10px;
}
#clearBtn:hover {
background-color: #0097a7;
}

document.getElementById("clearBtn").onclick = function() {
document.getElementById("inputBox").value = "";
};

通過以上代碼，我們成功實現了一個簡單的“清空”按鈕功能。希望本文對大家學習 CSS 有所幫助。