html, css如何添加一个搜索框，当没有文字的时候右侧显示放大镜，有文字搜索显示x

在HTML和CSS中创建一个搜索框并实现这个效果，你可以按照以下步骤进行：

1. **HTML结构**:

<div class="search-container">
  <input type="text" id="search-input" placeholder="搜索...">
  <button class="search-icon" aria-label="放大镜图标"></button>
</div>

这里我们创建了一个包含输入框和按钮的容器，并设置了一个占位文本。

2. **CSS样式**:

.search-container {
  position: relative;
}

#search-input {
  width: 100%;
  padding-right: 25px; /* 留出空间给搜索图标 */
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 16px;
  transition: opacity 0.2s ease-in-out;
}

.search-icon {
  position: absolute;
  right: 5px;
  top: 50%; /* 调整图标垂直居中位置 */
  transform: translateY(-50%);
  cursor: pointer;
  display: none; /* 初始隐藏 */
}

#search-input:focus + .search-icon {
  display: inline-block; /* 当输入聚焦时显示 */
}

/* 搜索框无文字时的状态 */
.search-container:empty::before {
  content: '\e914'; /* 使用字体图标库，例如font-awesome，这里假设'e914'对应放大镜图标 */
  font-family: 'your-font-awesome-or-custom-font';
  color: #ccc;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

这里的关键点在于利用伪元素`:empty`来检查输入框是否有内容。当输入框为空时，会显示预先设置好的放大镜图标。当用户开始输入时，通过CSS选择器`#search-input:focus + .search-icon`显示关闭的X图标。

请确保替换`'\e914'`为你的实际字体图标编码，以及对应的字体库路径。