css - R Shiny : change colour of individual check boxes in checkboxGroupInput

Question

我希望将 checkboxGroupInput 中实际单个复选框的颜色从标准 Shiny 蓝色更改为颜色。

我找到了以下代码作为此问题的答案 Coloring the checkboxGroupInput choices这将改变字体的颜色，但不会改变复选框本身。

library("shiny")

ui <- fluidPage(
  checkboxGroupInput(
    inputId = "my_cbgi",
    label = "Choose Something", 
    choiceNames = list(
      tags$span("A", style = "color: red;"),
      tags$span("B", style = "color: red;"), 
      tags$span("C", style = "color: blue;"), 
      tags$span("D", style = "font-weight: bold;")
    ),
    choiceValues = c("A", "B", "C", "D")
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

有没有办法修改它来改变单个复选框的颜色？预先感谢您的帮助。

Answer 1

您可以使用 shinyWidgets 包的 prettyCheckboxGroup 执行以下操作:

library(shiny)
library(shinyWidgets)

items <- c("One", "Two", "Three")

CSS <- "
/* CSS for the labels */
.pretty input[value=One]~.state span {
  color: red;
  font-weight: bold;
}
/* CSS for the checkboxes */
.pretty input[value=One]~.state label:after, 
.pretty input[value=One]~.state label:before {
  background-color: red;
}
.pretty input[value=Two]~.state label:after, 
.pretty input[value=Two]~.state label:before {
  background-color: green;
}
.pretty input[value=Three]~.state label:after, 
.pretty input[value=Three]~.state label:before {
  background-color: blue;
}
/* CSS for the checked checkboxes */
.pretty.p-default input:checked~.state label:after {
  background-color: yellow !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  h1("Hello World"),
  prettyCheckboxGroup("numbers", label="Choose numbers", 
                      choiceNames = items, choiceValues = items, 
                      selected = items),
  verbatimTextOutput("value")
)

server <- function(input,output,session){
  output$value <- renderText(input$numbers)
}

shinyApp(ui, server)