CSS帶清除的輸入框是一種非常實用的Web設計元素，它可以讓用戶在輸入文字時更加便捷和舒適。下面我們講解如何使用CSS創建一個帶清除的輸入框。
<html>
<head>
<style>
.clearable-input {
position: relative;
display: inline-block;
}
.clearable-input input[type=text] {
width: 200px;
padding-right: 16px;
}
.clearable-input .clear-btn {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('clear.png');
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.clearable-input .clear-btn:hover {
background-image: url('clear-hover.png');
}
</style>
</head>
<body>
<div class="clearable-input">
<input type="text" name="search" placeholder="Search">
<div class="clear-btn"></div>
</div>
</body>
</html>在這個代碼中，我們先創建了一個包含輸入框和清除按鈕的父級容器，它的class為“clearable-input”。這個容器的position屬性被設為relative，因為我們后面會用到absolute定位。然后，我們給輸入框設置了一個寬度為200px，同時padding-right屬性是16px，這是為了給清除按鈕留出空間。
接下來，我們使用了position:absolute和transform屬性來對清除按鈕進行定位，確保它出現在輸入框的右側。按鈕的寬度和高度都是16px，背景圖片使用了兩個PNG圖像，一個是普通狀態下的圖像，一個是鼠標懸停狀態下的圖像。鼠標指針會在按鈕上變為手型，以通知用戶它是可以點擊的。
最后，我們需要編寫一些JavaScript代碼來讓清除按鈕能夠刪除輸入框中的文本。以下是這段代碼：
let clearBtn = document.querySelector('.clear-btn');
let input = document.querySelector('.clearable-input input[type="text"]');
clearBtn.addEventListener('click', function() {
input.value = '';
});在這個代碼中，我們首先獲取了清除按鈕和輸入框的DOM元素。然后，我們使用addEventListener方法為清除按鈕添加了一個click事件監聽器，當用戶點擊按鈕時，輸入框中的文本就會被清除。
通過上述步驟，我們就成功地創建了一個帶清除按鈕的輸入框。這個輸入框既美觀又實用，可以讓用戶更加方便地輸入文本，同時也增強了Web界面的用戶體驗。
上一篇css 差異連線