如何修改shinyWidgets中treeInput组件的展开箭头颜色？

要修改treeInput组件的展开箭头（caret）颜色，需针对其CSS伪元素样式进行覆盖，以下是具体方案：

步骤1：添加自定义CSS样式 #

在dashboardBody中插入tags$style，指定.treejs-caret及其伪元素的边框颜色，适配深色背景：

body = dashboardBody(
  use_theme(my_theme),
  tags$style(HTML("
    /* 修改treeInput展开/折叠箭头的颜色 */
    .treejs-caret:before, .treejs-caret:after {
      border-color: #ffffff !important; /* 替换为你需要的浅色，比如白色#ffffff */
    }
    /* 确保箭头展开状态的颜色一致 */
    .treejs-caret.treejs-caret-open:before {
      border-color: #ffffff !important;
    }
  "))
)

步骤2：完整修改后的代码 #

将上述CSS整合到原有代码中，完整代码如下：

library(shiny);
library(shinydashboard);
library(shinydashboardPlus);
library(shinyWidgets);
library(fresh);

my_theme = create_theme(
  adminlte_color(
    light_blue = "#A7A7A7"
  )
)
sidebar = dashboardSidebar(
  width="420",
  sidebarMenu(
    treeInput(
      inputId = "solutionPORFiltersCheckbox",
      label = "POR",
      choices = create_tree(
        data.frame(
          "All" = c("All"),
          "Years" = c(
            "0",
            paste0(as.character(as.integer(format(Sys.Date(), "%Y"))-2),"-"),
            as.character(as.integer(format(Sys.Date(), "%Y"))-1),
            as.character(as.integer(format(Sys.Date(), "%Y"))),
            as.character(as.integer(format(Sys.Date(), "%Y"))+1),
            as.character(as.integer(format(Sys.Date(), "%Y"))+2),
            paste0(as.character(as.integer(format(Sys.Date(), "%Y"))+3),"+")
          ),
          "Category" = c("UNCLASSIFIED", "PAST", "LAST_YEAR", "THIS_YEAR", "NEXT_YEAR","NEXT2_YEAR","FUTURE")
        ),
        levels = c("All","Years"),
        levels_id = c("All","Category")
      ),
      selected = c("All"),
      returnValue = "id",
      closeDepth = 0
    )
  )
)
body = dashboardBody(
  use_theme(my_theme),
  tags$style(HTML("
    .treejs-caret:before, .treejs-caret:after {
      border-color: #ffffff !important;
    }
    .treejs-caret.treejs-caret-open:before {
      border-color: #ffffff !important;
    }
  "))
)

ui <- dashboardPage(
  dashboardHeader(),
  sidebar,
  body
)

server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

说明 #

• !important用于强制覆盖组件原有样式，确保自定义颜色生效
• 可根据需求替换#ffffff为其他适配深色背景的浅色（如#cccccc浅灰色），进一步优化辨识度

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