如何用CSS修改Shiny中dateRangeInput分隔符的背景与文字颜色

问题背景 #

在使用useShinydashboard()并搭配Darkly主题的Shiny应用中，dateRangeInput组件的日期分隔符（默认显示为“to”）被主题样式覆盖，出现白色背景与白色文字的情况，导致分隔符不可见。用户尝试通过自定义CSS文件修改，但现有样式未生效。

现有Shiny应用代码：

library(shiny)
library(shinydashboard)
library(shinythemes)

ui <- fluidPage(

useShinydashboard(),
  
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "pi_style.css")
  ),
 
  # Open navbar page and customize the theme
  navbarPage(
    theme = shinytheme("darkly"),
  ),

# Date Input
################################################################################ 
sidebarLayout(
  sidebarPanel(
    # Date selector
    dateRangeInput("dates", label = h3("Date range"), 
                   start = "2023-01-01", end = "2023-12-31"),
    ) # Close sidebarPanel
  ) # Close sidebarLayout
) # Close fluidPage


server <- function(input, output, session) {}

shinyApp(ui = ui, server = server)

用户尝试的CSS代码（未生效）：

.input-group-text {
  color: red; background-color: red;
}

解决方案 #

问题核心是CSS样式优先级冲突：Darkly主题的样式规则比你定义的.input-group-text更具体，导致自定义样式被覆盖。可以通过以下两种方式解决：

方法1：使用更精准的CSS选择器 #

针对Shiny中dateRangeInput的分隔符，使用更具体的选择器来覆盖主题样式：

/* 精准定位dateRangeInput的分隔符元素 */
.date-range-input .input-group-text {
  color: #000; /* 设置分隔符文字颜色，示例为黑色 */
  background-color: #fff; /* 设置分隔符背景颜色，示例为白色 */
  border-color: #ccc; /* 可选：调整分隔符边框颜色 */
}

方法2：强制提升样式优先级（使用!important） #

如果更具体的选择器仍不生效，可以用!important强制应用自定义样式：

.input-group-text {
  color: #000 !important;
  background-color: #fff !important;
}

额外说明 #

• 优先推荐方法1，!important会增加后续样式调试的复杂度，应尽量避免滥用。
• 可根据需求替换颜色值，比如将示例中的#000（黑色）、#fff（白色）改成你需要的颜色代码。

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