Change colour of checkbox using shinyWidgets

Question

I am using awesomeCheckboxGroup from the package shinyWidgets to create checkboxes in a shiny app. As default, they have a blue background. I can change the background colour with the argument status = but this is limited to the five status colours.

I believe I should be able to make a custom status using CSS, and pass this through to the argument. However, when I inspect the page, it is totally eluding me which the relevant bit is to change. I can't see the blue colour mentioned anywhere! I've also tried changing the status in case I can see the relevant code change there, but that hasn't helped me either.

I have only ever used CSS in the context of an app like this, so apologies if I am missing something obvious. Also happy with a solution that uses an alternative approach, of course!

EDIT: I have now identified the element, so I can change the colour! The downside is that it also affects another part of the page. In my actual work, this doesn't matter because I am actually changing to the same colour as the header, so this is not noticeable - but is there a way to be more specific and colour only the checkboxes?

library(shiny)
library(shinydashboard)
library(shinyWidgets)

sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(class ="rowhide",
           box(width = 12, solidHeader = TRUE,
               awesomeCheckboxGroup(inputId = "checkbox", 
                                    label = "Filter", 
                                    choices = c("A", "B", "C"), 
                                    selected = c("A", "B", "C"))
           )
  ),

  # theme styling ####
  tags$head(tags$style(HTML('
                            :after, :before{
                            background-color:#bff442;
                            }'

))))

ui <- dashboardPage(dashboardHeader(title = "Example"),
                    sidebar,
                    body
)


server <- function(input, output) {
}

shinyApp(ui, server)

score 4 · Accepted Answer · answered Dec 19 '18 at 13:05

Success! By adding the id of the checkbox input, I was able to isolate it to just that one element. However, it me a while to figure this out because the id needs to be added to both the before and after parts.

Here is my working code:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

sidebar <- dashboardSidebar()

body <- dashboardBody(
  fluidRow(class ="rowhide",
           box(width = 12, solidHeader = TRUE,
               awesomeCheckboxGroup(inputId = "checkbox", 
                                    label = "Filter", 
                                    status = "warning",
                                    choices = c("A", "B", "C"), 
                                    selected = c("A", "B", "C"))
           )
  ),

  # theme styling ####
  tags$head(tags$style(HTML('
                            #checkbox :after, #checkbox :before{
                            background-color:#bff442;
                            }'

))))

ui <- dashboardPage(dashboardHeader(title = "Example"),
                    sidebar,
                    body
)


server <- function(input, output) {
}

shinyApp(ui, server)

this adds the custom color to all the input boxes. How could we tweak to have this applied only to the selected boxes? — chas, Mar 28 '22 at 09:33

score 2 · Answer 2 · answered Dec 19 '18 at 11:45

2

Check out this link: How to change the background color on a input checkbox with css? - you'll have to wrap anything within a tag call from shiny though

answered Dec 19 '18 at 11:45

Having looked at this, it is much more complicated than what I was after, but it did help me identify the right element. I think I can simply change that rather than needing to create my own. Will post what I have done. – Jaccar Dec 19 '18 at 12:08

score 0 · Answer 3 · answered Jun 16 '22 at 20:59

You can also change the “primary” colors of awesomeCheckbox inputs by adding this to your css file:

tags$style(".checkbox-bs-primary input[type='checkbox']:checked + label::before,
.checkbox-bs-primary input[type='radio']:checked + label::before {
    background-color: #FFBB00;
    border-color: #FFBB00;
}
.checkbox-primary input[type='checkbox']:checked + label::before,
.checkbox-primary input[type='radio']:checked + label::before {
    background-color: #FFBB00;
    border-color: #FFBB00;
}"),

Change colour of checkbox using shinyWidgets

3 Answers3