本文摘要
泛微 Ecology10 中可通过自定义 CSS 将浏览按钮的搜索图标改造成真按钮，包括调整输入框最小宽度、设置蓝色背景与圆角、用伪元素补充按钮文字并增加悬停效果。使用时需按实际编辑提示语和字段 ID 替换对应选择器，适合需要美化搜索入口的二次开发场景。

效果对比：

修改前修改后
image.pngimage.png

CSS代码

/* 修改输入框长度 */
input[placeholder="Search Quickly"] {
  min-width: 100px !important;
}


/* 基础按钮样式 */
div.field1190285555456860160span .associative-search-icon {
  background-color: #5d9cec;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  max-height: 24px;
}


/* 修改图标颜色（与蓝色背景对比） */
div.field1190285555456860160span .associative-search-icon .ui-icon {
  color: white;
}


/* 添加文字（通过伪元素实现，无需改HTML） */
div.field1190285555456860160span .associative-search-icon::after {
  content: "Batch Select";
  color: white;
}


/*  hover效果增强 */
div.field1190285555456860160span .associative-search-icon:hover {
  background-color: #7bb0f2;
}

使用

  1. 修改输入框长度代码中placeholder="Search Quickly"对应编辑时显示提示语 image.png

  2. field1190285555456860160span中的数字部分对应字段ID image.png