Shinydashboard自定义box背景色：折叠样式异常及输入框背景统一设置问题

问题背景 #

需要为shinydashboard的Box设置自定义背景色#ABD7E9，现有CSS可实现基础样式，但开启collapsible = TRUE后，折叠按钮区域样式显示不一致，添加额外CSS规则仍未解决；同时要求将numericInput及相关输入组件的背景色也统一设置为#ABD7E9。

解决方案 #

通过补充以下CSS规则，覆盖Box折叠按钮的默认样式（包括正常状态与hover状态），同时设置输入组件的背景色：

• 覆盖Box头部折叠按钮的背景色及hover状态
• 设置所有.form-control类输入框的背景色
• 调整numericInputIcon的图标容器背景色，保持视觉统一

完整代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$style(HTML("
        /* Box基础样式 */
        .box.box-solid.box-success>.box-header {
          color:#2071B5;
          background:#ABD7E9
        }

        .box.box-solid.box-success{
          border-color:#ABD7E9;
          background:#ABD7E9
        }

        /* 解决折叠按钮样式不一致问题 */
        .box.box-solid.box-success>.box-header .box-tools button {
          color:#2071B5;
          background:#ABD7E9;
          border:none;
        }
        .box.box-solid.box-success>.box-header .box-tools button:hover {
          background:#99c8d9; /* hover时稍深的同色系 */
          color:#1a5a8a;
        }

        /* 设置输入框背景色 */
        .form-control {
          background-color:#ABD7E9 !important;
          border-color:#2071B5;
        }

        /* 适配numericInputIcon的图标容器 */
        .input-group-addon {
          background-color:#ABD7E9;
          border-color:#2071B5;
          color:#2071B5;
        }
      ")),

      box(
        title = "Shiny Box",
        status = "success",
        solidHeader = TRUE,
        collapsible = TRUE,
        collapsed = TRUE,
        tags$head(tags$style(HTML("div#inline label { width: 52%; }
                               div#inline input { display: inline-block; width: 68%;}"))),
        tags$head(
          tags$style(type="text/css", "#inline label{ display: table-cell; text-align: left; vertical-align: middle; }
                                   #inline .form-group { display: table-row;}")),
        div(id="inline",  style="width:35vw;",
            div(HTML("<b>TEST </b>")),
            br(),
            numericInputIcon("A", h5("test1"), value = 20, icon = icon("percent")) ,
            numericInputIcon("B", h5("test2"), value = 40, icon = icon("percent")) ,
            numericInputIcon("C", h5("test3"), value = 60, icon = icon("percent")) ,
            currencyInput("X", "Total", value = 0.3, format = "percentageUS2dec")
            
        )
      )
    )
  ),
  server = function(input, output) { }
)

说明 #

• 优化了Box的边框样式，直接用border-color统一设置四边颜色
• 针对折叠按钮添加了hover状态样式，提升交互体验
• 使用!important确保输入框背景色规则优先级足够，覆盖默认样式
• 同步设置了输入框图标容器的背景色，保持整体视觉一致性

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