如何修改自定义样式checkbox选中后的边框颜色？尝试方案未生效

你之前的代码不生效，是因为原生的.overflow-control-input复选框被设置了display: none，你给这个隐藏元素设置边框不会在页面上渲染。这个自定义复选框的可视边框属于同级的.overflow-control-indicator元素，需要通过兄弟选择器关联选中状态来修改样式。

只需要新增以下CSS规则即可实现选中后边框和对勾同色：

/* 选中状态下修改外边框颜色 */
.custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator {
  border-color: #00909e;
}

如果你想换成你代码里的自定义蓝色#07C4C1，可以同步修改对勾颜色，保持风格统一：

/* 选中状态下修改外边框为自定义蓝色 */
.custom-control.overflow-checkbox .overflow-control-input:checked ~ .overflow-control-indicator {
  border-color: #07C4C1;
}
/* 同步修改对勾颜色为自定义蓝色 */
.custom-control.overflow-checkbox .overflow-control-input:checked~.overflow-control-indicator::after {
  border-bottom-color: #07C4C1;
  border-right-color: #07C4C1;
}

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