input输入框里面添加刷新图标
时间: 2023-07-02 13:07:48 浏览: 112
要在input输入框里面添加刷新图标,可以使用HTML、CSS和JavaScript来实现。以下是一个简单的实现方法:
HTML代码:
```html
<div class="input-container">
<input type="text" id="input-box">
<i class="fa fa-refresh" id="refresh-icon"></i>
</div>
```
CSS代码:
```css
.input-container {
position: relative;
}
#input-box {
padding-right: 30px; /* 留出刷新图标的位置 */
}
#refresh-icon {
position: absolute;
top: 50%;
right: 5px;
transform: translateY(-50%);
cursor: pointer;
}
```
JavaScript代码:
```javascript
var inputBox = document.getElementById("input-box");
var refreshIcon = document.getElementById("refresh-icon");
refreshIcon.addEventListener("click", function() {
inputBox.value = ""; // 点击刷新图标时清空输入框的内容
});
```
这样就可以在input输入框里面添加刷新图标,并且点击图标时可以清空输入框的内容。你可以根据自己的需求进行修改和扩展。
阅读全文