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 事件监听输入框的变化，在输入框中有内容时显示关闭按钮，否则隐藏。当关闭按钮被点击时，清空输入框的值并隐藏关闭按钮。