ExtJS中修改Grid Panel内复选框的颜色、背景及边框样式

直接通过CSS就能实现你要的效果，不用替换成图片列。以下是针对常见Grid组件（以Ext JS、AG Grid为例）的解决代码，解决背景溢出和勾选标记颜色同步的问题：

核心思路 #

1. 给复选框容器设置灰色边框，同时开启overflow: hidden防止背景色溢出边框；
2. 单独指定选中状态的蓝色背景，强制保持灰色边框；
3. 覆盖勾选标记的颜色为白色，脱离默认的边框颜色关联。

Ext JS 场景代码 #

/* 基础复选框样式 */
.x-grid-checkcolumn {
    border: 1px solid #ccc; /* 灰色边框 */
    border-radius: 2px; /* 可选：优化边框圆角 */
    overflow: hidden; /* 解决背景溢出问题 */
    background-color: #fff; /* 默认未选中背景 */
}

/* 选中状态样式 */
.x-grid-checkcolumn-checked {
    background-color: #1890ff; /* 蓝色背景 */
    border-color: #ccc !important; /* 强制保持灰色边框，覆盖默认选中样式 */
}

/* 选中状态的勾选标记 */
.x-grid-checkcolumn-checked::before {
    color: #fff !important; /* 白色勾选标记 */
    /* 以下根据组件自带的图标字体调整，示例用Font Awesome */
    font-family: "Font Awesome 5 Free" !important;
    content: "\f00c";
    font-weight: 900;
}

AG Grid 场景代码 #

/* 复选框容器基础样式 */
.ag-checkbox-input-wrapper {
    border: 1px solid #ccc;
    border-radius: 2px;
    overflow: hidden;
}

/* 选中状态容器 */
.ag-checkbox-input-wrapper.ag-checked {
    background-color: #1890ff;
    border-color: #ccc !important;
}

/* 选中状态的勾选图标 */
.ag-checkbox-input-wrapper.ag-checked .ag-checkbox-icon {
    color: #fff !important;
}

关键说明 #

• 背景溢出问题：是因为默认复选框的背景元素超出了边框范围，overflow: hidden可以把超出的部分裁剪掉；
• 勾选标记颜色同步：默认组件会把选中状态的边框色和标记色绑定，通过!important强制覆盖标记颜色，就能实现白色勾选效果。

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