如何修改非Bootstrap版JqGrid的分页器背景颜色？

非Bootstrap版的JQGrid分页器基于jQuery UI的样式体系，你可以通过直接覆盖对应的CSS类来修改样式，无需依赖Bootstrap版教程的方案。以下是针对分页器不同元素的具体修改方法：

分页器容器整体样式 #

修改分页器的背景、边框等基础样式：

.ui-jqgrid-pager {
  background-color: #f8f9fa; /* 替换为目标背景色 */
  border-top-color: #dee2e6;
  padding: 8px 12px;
}

分页按钮样式 #

调整上一页、下一页、首页、末页等按钮的状态样式：

/* 普通状态按钮 */
.ui-jqgrid .ui-pg-button {
  background-color: transparent;
  border: none;
  color: #495057; /* 按钮文字颜色 */
}

/* 鼠标悬浮状态 */
.ui-jqgrid .ui-pg-button:hover {
  background-color: #e9ecef;
  color: #212529;
}

/* 禁用状态按钮 */
.ui-jqgrid .ui-pg-button.ui-state-disabled {
  color: #adb5bd;
  cursor: not-allowed;
}

页码输入框与条数选择框 #

修改页码输入框和每页条数下拉框的样式：

.ui-jqgrid .ui-pg-input {
  border: 1px solid #ced4da;
  background-color: #ffffff;
  color: #495057;
  padding: 2px 4px;
}

.ui-jqgrid .ui-pg-selbox {
  border: 1px solid #ced4da;
  background-color: #ffffff;
  color: #495057;
}

分页信息文本样式 #

调整“显示X到X条，共X条”这类提示文本的颜色：

.ui-jqgrid .ui-paging-info {
  color: #6c757d; /* 文本颜色 */
}

实用小技巧 #

如果找不到对应样式的CSS类，可以用浏览器开发者工具（F12）点击分页器元素，查看它的class属性，再针对性编写CSS覆盖。注意要确保你的自定义CSS代码在jquery-ui.css之后加载，这样才能优先覆盖默认样式。

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