Shiny checkboxGroupButtons css 选中时的不同颜色

Question

我想让作为组一部分的单个复选框在被选中时改变颜色。 我已经能够在未选中和悬停时设置它们的样式，但已选中的伪类似乎不起作用。 “active”的伪类导致鼠标按下时颜色发生变化，但它在鼠标弹起时恢复（即，只有按住鼠标按钮时才显示该颜色）。

请注意，此示例仅适用于其中一个按钮。 我希望它们中的每一个在检查时都变成不同的颜色。

library(shiny)
library(shinyWidgets)


ui <- fluidPage(
  
  tags$head(
    tags$style(HTML("

.btn-group-toggle:nth-child(1) .btn-custom-class {
  background: green !important;
  color: black !important;
  border: red !important;
}


.btn-group-toggle:nth-child(1) .btn-custom-class:hover {
  background: yellow !important;
  color: black !important;
  border: red !important;
}

.btn-group-toggle:nth-child(1) .btn-custom-class:checked {
  background: red !important;
  color: black !important;
  border: red !important;

}

.btn-group-toggle:nth-child(1) .btn-custom-class:active {
  background: red !important;
  color: black !important;
  border: red !important;

}"
    ))
  ),

checkboxGroupButtons(
  inputId = "cluster_groups",
  label = "Clusters Displayed",
  choiceNames = c("1", "2", "3", "4", "5", "6"),
  choiceValues = 1:6,
  #selected = c("1", "2", "3", "4", "5", "6"),
  status = "custom-class"
),
)

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

shinyApp(ui, server)

Answer 1

当你点击按钮时，它会添加一个 class "active"到".btn-group-toggle:nth-child(1).btn-custom-class"所以你可以使用这个 class 来替换":checked" ：

.btn-group-toggle:nth-child(1) .btn-custom-class.active {
  background: red !important;
  color: black !important;
  border: red !important;
}