Change colour of checkbox using shinyWidgets - css

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)

Answer 1

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)

Answer 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

Answer 3

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;
}"),