如何自定义shinydashboard头部、侧边栏及selectizeInput的背景颜色

1. 修复头部标题角落的背景颜色 #

你只修改了导航栏（navbar）的背景，但标题所在的logo区域由单独的CSS类控制，需要补充对应样式：

/* 头部标题区域背景 */
.skin-blue .main-header .logo {
  background-color: #22313f;
}
/* 鼠标悬停标题区域时保持一致颜色 */
.skin-blue .main-header .logo:hover {
  background-color: #22313f;
}

2. 侧边栏自定义背景颜色的最优方法 #

直接针对侧边栏核心容器和菜单元素设置样式，同时可调整文字、选中状态颜色适配背景：

/* 侧边栏整体背景 */
.skin-blue .main-sidebar {
  background-color: #1e2a35;
}
/* 侧边栏菜单项背景 */
.skin-blue .sidebar-menu > li > a {
  background-color: #1e2a35;
  color: #ffffff;
}
/* 菜单项选中时的背景 */
.skin-blue .sidebar-menu > li.active > a {
  background-color: #2c3e50;
}

3. selectizeInput输入框自定义背景颜色的最优方法 #

selectizeInput由多个嵌套元素组成，需分别设置输入容器、下拉列表及选中项的样式：

/* 输入框容器背景 */
.selectize-input {
  background-color: #f8f9fa !important;
}
/* 下拉选项列表背景 */
.selectize-dropdown {
  background-color: #f8f9fa !important;
}
/* 选中的下拉选项背景 */
.selectize-dropdown-content .active {
  background-color: #e9ecef !important;
}

整合后的完整代码 #

将所有CSS统一放入tags$head(tags$style(HTML(...)))中，修改后的完整代码如下：

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = 'Hello'),
  dashboardSidebar(sidebarMenu(
    menuItem(tabName = 'Panel1', text = ' Growth Heatmap'),
    dateInput("Start_Date", "Start Date", min = '2000-01-01', max = Sys.Date(), value = '2020-01-01',format = "yyyy-mm-dd")
  )),
  dashboardBody(
    tags$head(tags$style(HTML('
      /* 头部导航栏 */
      .skin-blue .main-header .navbar {background-color: #22313f;}
      /* 头部标题区域 */
      .skin-blue .main-header .logo {background-color: #22313f;}
      .skin-blue .main-header .logo:hover {background-color: #22313f;}
      
      /* 侧边栏样式 */
      .skin-blue .main-sidebar {background-color: #1e2a35;}
      .skin-blue .sidebar-menu > li > a {background-color: #1e2a35; color: #fff;}
      .skin-blue .sidebar-menu > li.active > a {background-color: #2c3e50;}
      
      /* selectizeInput样式 */
      .selectize-input {background-color: #f8f9fa !important;}
      .selectize-dropdown {background-color: #f8f9fa !important;}
      .selectize-dropdown-content .active {background-color: #e9ecef !important;}
    '))),
    tabItems(
      tabItem(tabName = 'Panel1',
              fluidRow(box(selectizeInput('select_mean', 'Select Number', choices = c(12,24,36,48,60,120)),height=80,width=4)),
              fluidRow(box(width = 13, height = 655))
      )
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

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