如何在R Shiny中修改单个特定SliderTextInput的颜色？

要实现仅修改某一个sliderTextInput组件的样式，同时不影响其他同类型组件，关键是要精准定位目标组件的子元素。你之前使用的mySliderText1 .irs--shiny .irs-bar写法错误，原因是没有用ID选择器（#）指定目标组件的容器，导致选择器无法精准匹配。

正确的CSS选择器规则 #

每个sliderTextInput的inputId会对应页面中一个包含该组件的<div>元素的ID，因此需要用#inputID作为前缀，结合后代选择器定位到内部的滑块元素。比如要修改inputId = "mySliderText1"的组件样式，CSS规则应写成：

#mySliderText1 .irs--shiny .irs-bar {
  background: blueviolet;
  border-top: 1px solid blueviolet;
  border-bottom: 1px solid blueviolet;
}
#mySliderText1 .irs--shiny .irs-to, #mySliderText1 .irs--shiny .irs-from {
  background-color: blueviolet;
}
#mySliderText1 .irs--shiny .irs-handle {
  border: 1px solid #c41818;
  background-color: #c41818;
}

修改后的完整可运行代码 #

library("shinyWidgets")

ui <- fluidPage(
  tags$style(HTML("
    /* 仅作用于inputId为mySliderText1的滑块组件 */
    #mySliderText1 .irs--shiny .irs-bar {
      background: blueviolet;
      border-top: 1px solid blueviolet;
      border-bottom: 1px solid blueviolet;
    }
    #mySliderText1 .irs--shiny .irs-to, #mySliderText1 .irs--shiny .irs-from {
      background-color: blueviolet;
    }
    #mySliderText1 .irs--shiny .irs-handle {
      border: 1px solid #c41818;
      background-color: #c41818;
    }")),
  
  br(),
  sliderTextInput(
    inputId = "mySliderText",
    label = "Month range slider:",
    choices = month.name,
    selected = month.name[c(4, 7)]
  ),
  br(),
  sliderTextInput(
    inputId = "mySliderText1",
    label = "Month range slider 1:",
    choices = month.name,
    selected = month.name[c(1, 5)]
  )
)

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

shinyApp(ui = ui, server = server)

运行这段代码后，只有Month range slider 1会应用自定义的蓝紫色进度条和红色手柄样式，另一个滑块保持默认样式，实现了单个组件的样式隔离。

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