如何调整Infragistics igGrid筛选行高度、筛选输入框高度及输入字体大小

嗨，我来帮你搞定这个问题～Infragistics igGrid的筛选栏样式完全可以通过自定义CSS来调整，不用动插件源码，直接针对它的默认类名写样式就好，非常灵活。

咱们分几个部分来改，你可以把下面的CSS代码加到你的项目样式文件里（注意要放在Infragistics官方样式之后加载，这样才能覆盖默认样式）：

1. 调整筛选行的整体高度 #

首先修改筛选行的高度，同时调整单元格内边距保证内容居中：

/* 自定义筛选行高度，这里设为40px，你可以根据需求改 */
.ui-iggrid-filterrow {
  height: 40px;
}

/* 调整筛选单元格的内边距，让输入框在新行高中垂直居中 */
.ui-iggrid-filtercell {
  padding: 6px 12px;
}

2. 调整筛选输入框的高度和输入字体 #

接下来修改输入框的高度、字体大小，同时优化内边距让文字显示更舒服：

/* 调整筛选输入框的高度、字体大小及内边距 */
.ui-iggrid-filterinput {
  height: 100%; /* 设为100%可以自动适配筛选行的高度，也可以设固定值比如32px */
  font-size: 16px; /* 输入文字的大小，默认一般是14px，按需调整 */
  padding: 0 8px; /* 输入框内边距，避免文字贴到边框 */
  box-sizing: border-box; /* 确保内边距不会让输入框超出单元格范围 */
}

3. （可选）调整筛选图标样式（如果需要的话） #

如果你的筛选栏有下拉或清除图标，也可以同步调整它们的大小和位置，保持视觉统一：

/* 调整筛选图标的大小和垂直对齐 */
.ui-iggrid-filterbutton {
  font-size: 18px;
  vertical-align: middle;
}

额外小提示 #

如果你担心样式冲突，可以给你的grid容器加专属范围限制，比如用你代码里的divSearchClient容器，把选择器写得更具体：

#divSearchClient .ui-iggrid-filterrow {
  height: 45px;
}

这样只会影响这个特定的grid，不会干扰页面上其他的igGrid组件。要是遇到类名不生效的情况，打开浏览器F12开发者工具，直接选中筛选行或输入框查看实际类名，对应修改CSS选择器就好啦。

你把这些样式加进去后，刷新页面就能看到效果了，数值都可以根据你的UI需求灵活调整～

内容来源于stack exchange