Shiny checkboxGroupButtons css for different color when checked

Question

I would like to have individual checkboxes that are part of a group change color when they are checked. I've been able to style them when unchecked and when they are hovered, but the pseudoclass for checked doesn't seem to work. The pseudoclass for "active" causes a color change on mouse-down, but it reverts on mouse up (ie it is only that color while the mouse button is held down).

Note that this example is for just one of the buttons. I will want each of them to become a different color when checked.

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

When you click the button, it adds a class "active" to ".btn-group-toggle:nth-child(1).btn-custom-class" so you can use this class to replace ":checked" :

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