如何更改 R Shiny 中单个特定 SliderTextInputs 的颜色？

Question

基于this问题和响应，我尝试通过将 CCS 应用于输入来调整特定 sliderTextInput 的颜色，同时在 R Shiny 中保持另一个不变。该问题的答案提到它应该通过将 css 属性应用到相应输入 ID 的子类来工作。然而，这就是我挣扎的地方。我不熟悉 HTML 语法，我对

mySliderText1 .irs--shiny .irs-bar

的猜测似乎不正确。正确的语法是什么，或者我该如何让它工作？ 预先感谢！

下面是基于 gdevaux 答案的扩展 MWE：

library("shinyWidgets")

ui <- fluidPage(
  tags$style(HTML("
    .irs--shiny .irs-bar {
      background: blueviolet;
      border-top: 1px solid blueviolet;
      border-bottom: 1px solid blueviolet;
    }
    .irs--shiny .irs-to, .irs--shiny .irs-from {
      background-color: blueviolet;
    }
    .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)```

Answer 1

我会通过将所需的滑块输入包装在具有特定类的

<div>

中来实现此目的。

div(id = "sliderdiv", sliderTextInput(
    inputId = "mySliderText",
    label = "Month range slider:",
    choices = month.name,
    selected = month.name[c(4, 7)]
))

然后仅将该样式应用于该班级的孩子：

tags$style(HTML("
#sliderdiv .irs-bar {
    background: blueviolet;
    border-top: 1px solid blueviolet;
    border-bottom: 1px solid blueviolet;
}
#sliderdiv .irs-from, #sliderdiv .irs-to {
    background-color: blueviolet;
}
#sliderdiv .irs-handle {
    border: 1px solid #c41818;
    background-color: #c41818;
}"))

输出：

完整代码

library("shinyWidgets")
library(shiny)

ui <- fluidPage(
    tags$style(HTML("
    #sliderdiv .irs-bar {
      background: blueviolet;
      border-top: 1px solid blueviolet;
      border-bottom: 1px solid blueviolet;
    }
    #sliderdiv .irs-from, #sliderdiv .irs-to {
      background-color: blueviolet;
    }
    #sliderdiv .irs-handle {
      border: 1px solid #c41818;
      background-color: #c41818;
    }")),
    br(),
    div(id = "sliderdiv", 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)