图标浮动右侧输入css

本文介绍如何使用 CSS 实现图标浮动在输入框右侧的效果。该效果常用于搜索框或输入框中的清空按钮。

实现效果

我们先来看看最终的实现效果：

可以看到，在输入框中输入文字时，右侧有一个叉号图标浮动在输入框内部，点击图标可以清空输入框中的内容。

下面我们来逐步实现该效果。

HTML 结构

首先，我们需要准备好一个输入框：

<input type="text" placeholder="请输入内容">

接下来我们在该输入框的父级元素中添加一个新元素，用于放置清空按钮图标：

<div class="input-wrapper">
  <input type="text" placeholder="请输入内容">
  <span class="icon"></span>
</div>

CSS 样式

首先我们设置输入框的样式，以及包裹输入框的样式：

.input-wrapper {
  display: flex;
  align-items: center;
  width: 300px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 0 10px;
}

然后我们为清空按钮图标添加样式，让其浮动在输入框的右侧：

.icon {
  display: none;
}
.input-wrapper:hover .icon {
  display: block;
}
.icon::before {
  content: "\00d7";
  position: absolute;
  right: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #999;
  cursor: pointer;
}

这里我们使用 display: none; 将图标隐藏起来，当鼠标移动到输入框中时，使用 display: block; 显示该图标。图标使用 ::before 伪元素实现，内容是一个叉号（也可以换成其它图标），使用 position: absolute; 和 right: 10px; 让其浮动在输入框的右侧。最后使用 cursor: pointer; 将鼠标光标改为手型，增强用户体验。

JavaScript 事件

最后，我们为清空按钮图标添加点击事件，实现清空输入框内容的功能：

var inputWrapper = document.querySelector('.input-wrapper');
inputWrapper.addEventListener('click', function(e) {
  if (e.target.matches('.icon')) {
    inputWrapper.querySelector('input').value = '';
    inputWrapper.querySelector('.icon').style.display = 'none';
  }
});
inputWrapper.querySelector('input').addEventListener('input', function(e) {
  var value = e.target.value.trim();
  if (value.length > 0) {
    inputWrapper.querySelector('.icon').style.display = 'block';
  } else {
    inputWrapper.querySelector('.icon').style.display = 'none';
  }
});

这里我们监听 .input-wrapper 元素的点击事件，当点击清空按钮图标时，将输入框的值清空并隐藏该图标。监听输入框的 input 事件，当输入框的值不为空时显示清空按钮图标，为空时隐藏该图标。

结语

到此我们就完成了图标浮动在输入框右侧的效果实现。你可以根据实际需求修改样式，例如调整输入框和图标的宽度、高度等。