input框中添加一个 X（关闭/清空按钮）

要在输入框（<input> 元素）中添加一个 X（关闭/清空按钮），可以使用 CSS 和 JavaScript 实现。

HTML：

<div class="input-container"><input type="text" id="myInput" placeholder="请输入内容"><span class="close-btn" id="clearInput">X</span>
</div>

在上述代码中，我们创建了一个包含输入框和关闭按钮的容器。输入框使用了 <input> 元素，而关闭按钮是一个 <span> 元素，它的文本内容为 X 字符。

CSS：

.input-container {position: relative;
}.close-btn {position: absolute;right: 5px;top: 50%;transform: translateY(-50%);cursor: pointer;font-size: 18px;color: #aaa;display: none; /* 初始状态隐藏 */
}.close-btn:hover {color: #000;
}

在上述代码中，我们将 .close-btn 样式设置为绝对定位，然后使用 right: 5px; 和 top: 50%; 来分别设置关闭按钮距离右侧和垂直居中位置。使用 transform: translateY(-50%); 将其向上平移一半高度，以达到垂直居中的效果。在鼠标悬停时，可以将其颜色变为黑色。

JavaScript：

const inputEl = document.getElementById('myInput');
const clearBtnEl = document.getElementById('clearInput');inputEl.addEventListener('input', function() {if (inputEl.value.length > 0) {clearBtnEl.style.display = 'inline-block';} else {clearBtnEl.style.display = 'none';}
});clearBtnEl.addEventListener('click', function() {inputEl.value = '';clearBtnEl.style.display = 'none';
});

在上述代码中，我们获取了输入框和关闭按钮的 DOM 元素。然后使用 input 事件监听输入框的变化，在输入框中有内容时显示关闭按钮，否则隐藏。当关闭按钮被点击时，清空输入框的值并隐藏关闭按钮。