MENU

[泛微 Ecology10] 浏览按钮搜索按钮样式处理(真按钮)

• 2025 年 11 月 14 日 • 阅读: 14 • 实用技巧,OA

效果对比:

修改前修改后
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