如何修改Bootstrap自定义文件输入中Browse按钮的颜色？

Bootstrap的自定义文件输入里，“Browse”按钮是通过custom-file-label的::after伪元素渲染的，直接修改custom-file-input或custom-file-label的color属性不会生效，你需要针对这个伪元素设置样式：

.custom-file-label::after {
    /* 修改按钮背景色 */
    background-color: #你的目标颜色值;
    /* 修改按钮文字颜色 */
    color: #你的目标文字颜色值;
}

如果你的样式被Bootstrap默认样式覆盖，可通过!important提升优先级（优先保证你的CSS代码在Bootstrap样式之后加载，尽量少用!important）：

.custom-file-label::after {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

注：若使用Bootstrap 5，类名已调整为form-file-label，对应伪元素选择器改为.form-file-label::after即可。

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