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

查看以下链接：How to change the background color on a input checkbox with css?-您必须将所有内容包装在发自闪亮的标记调用中

Answer 2

成功！通过添加复选框输入的ID，我能够将其隔离为仅一个元素。但是，我花了一会儿时间才能弄清楚这一点，因为id需要同时添加到之前和之后的部分中。

这是我的工作代码：

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)

Change colour of checkbox using shinyWidgets

2 个答案: