如何实现输入宽度限制为80%、调整清除图标位置并添加搜索图标的搜索框

实现代码 #

你可以直接替换原有样式，调整参数即可达到目标效果：

/* 搜索框外层容器 */
.searchbox {
  position: relative;
  width: 320px; /* 可根据需求自行调整搜索框总宽度 */
}

/* 搜索输入框 */
#searchBox {
  width: 100%;
  box-sizing: border-box;
  padding-right: 20%; /* 限制输入内容最多到80%宽度位置，预留右侧图标空间 */
  height: 36px; /* 可自行调整高度 */
  /* 原有样式保留 */
  margin-left: 0px;
}

/* 调整Webkit内核浏览器原生清除图标位置（适配Chrome、Edge、Safari等） */
#searchBox::-webkit-search-cancel-button {
  margin-right: 30px; /* 数值越大，清除图标左移距离越多，可按需微调 */
  cursor: pointer;
}

/* 兼容Firefox浏览器清除图标调整 */
#searchBox::-moz-search-clear {
  margin-right: 30px;
  cursor: pointer;
}

/* 搜索按钮 */
#searchBtn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* 原有样式保留 */
  margin-left: 0px;
  color: rgb(0, 0, 0);
  background-color: transparent;
  border: none;
  cursor: pointer;
}

原有HTML结构无需修改即可生效。

参数调整说明 #

• 如需修改输入区域的最大宽度，调整#searchBox的padding-right数值即可，百分比对应总宽度的预留比例
• 如需调整清除图标的左移距离，修改对应伪元素的margin-right数值即可
• 如需调整搜索图标的左右位置，修改#searchBtn的right数值即可

内容的提问来源于stack exchange，提问作者lax