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)

score 2 · Accepted Answer · answered Oct 05 '22 at 08:16

2

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;
}

answered Oct 05 '22 at 08:16

bretauv

7,756
2
20
57

I actually tried that already. It turns the button to a different color WHILE the mouse button is depressed, but as soon as the mouse button is released it goes back to the standard color. – jzadra Oct 05 '22 at 14:56
This is because you use `.btn-custom-class:active` in your example whereas it should be `.btn-custom-class.active` – bretauv Oct 05 '22 at 15:12
You are right! Why does CSS choose such a slightly different format to achieve the same thing for identifying a state? – jzadra Oct 05 '22 at 15:45

Shiny checkboxGroupButtons css for different color when checked

1 Answers1