如何将jstree复选框颜色从绿色修改为黑色？

Hey Brian, 我之前调整过jsTree的复选框样式，这几个方法应该能帮到你：

方法一：直接覆盖默认CSS样式 #

jsTree的复选框默认样式是通过CSS伪元素和特定类实现的，你可以添加自定义CSS直接覆盖它：

/* 未选中状态的复选框 */
.jstree-checkbox:not(.jstree-checkbox-checked):not(.jstree-checkbox-undetermined) {
  border-color: #000 !important; /* 把边框改成黑色 */
}

/* 完全选中状态的复选框 */
.jstree-checkbox-checked::before {
  background-color: #000 !important; /* 勾选区域填充黑色 */
  border-color: #000 !important; /* 边框同步黑色 */
}

/* 半选中（不确定）状态的复选框 */
.jstree-checkbox-undetermined::before {
  background-color: #000 !important;
  border-color: #000 !important;
}

这里加!important是为了确保你的样式优先级高于jsTree的默认样式，避免被覆盖。如果怕冲突，也可以把选择器写得更具体（比如加上你的树形结构容器ID）。

方法二：自定义jsTree主题（更优雅的方式） #

如果不想用!important，可以通过自定义主题的方式修改，这也是jsTree官方推荐的做法：

1. 初始化jsTree时指定自定义主题：

$('#your-tree-container').jstree({
  core: {
    data: [/* 你的部门架构数据 */]
  },
  checkbox: {
    tie_selection: false, // 根据你的需求调整复选框配置
    cascade: 'down'
  },
  themes: {
    name: 'custom-department-theme', // 自定义主题名称
    url: '/path/to/your/custom-theme.css' // 主题CSS文件路径
  }
});

2. 在custom-theme.css中编写样式：

/* 基于自定义主题的复选框样式 */
.custom-department-theme .jstree-checkbox:not(.jstree-checkbox-checked):not(.jstree-checkbox-undetermined) {
  border-color: #000;
}

.custom-department-theme .jstree-checkbox-checked::before {
  background-color: #000;
  border-color: #000;
}

.custom-department-theme .jstree-checkbox-undetermined::before {
  background-color: #000;
  border-color: #000;
}

这种方式不需要!important，因为主题样式的优先级会和jsTree默认主题匹配，更利于维护。

小技巧 #

你可以打开浏览器开发者工具（F12），选中复选框元素，查看它的默认CSS类和样式规则，这样能更精准地调整细节（比如复选框的大小、勾选符号颜色等）。

试试上面的方法，应该就能把复选框改成黑色啦！

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