输入框里有值时显示一个叉号，具有清空功能，无值则隐藏，简单的写法

如果你想在HTML输入框内实现这种功能，你可以使用HTML和CSS来创建一个简单的文本输入框旁边带有一个显隐状态的叉号图标。首先，添加一个输入框和一个图标作为占位：

<input type="text" id="clearable-input" value="" />
<span class="clear-icon" title="清除"></span>

然后使用CSS来控制图标的状态：

.clearable-input {
  display: inline-block;
  position: relative;
}

.clear-icon {
  display: none;
  position: absolute;
  top: calc(50% - 9px); /* 根据你的图标尺寸调整 */
  right: 5px;
  color: red; /* 叉号颜色 */
  font-size: 18px; /* 图标大小 */
  cursor: pointer;
}

.clearable-input.value-present + .clear-icon {
  display: block;
}

在CSS中，我们监听输入框(`#clearable-input`)是否有值的变化，如果有值(`.value-present`)，就让清除图标(`.clear-icon`)显示；反之，则隐藏。

为了实现清空输入框的功能，你可以在图标上绑定一个事件，比如点击清除图标：

document.querySelector('.clear-icon').addEventListener('click', function(e) {
  e.preventDefault();
  document.getElementById('clearable-input').value = '';
});

这将在用户点击清除图标时，清除输入框的内容。