使用 shinyWidgets 更改复选框的颜色答案

【问题标题】：Change colour of checkbox using shinyWidgets使用 shinyWidgets 更改复选框的颜色
【发布时间】：2019-05-19 21:09:43
【问题描述】：

我正在使用 shinyWidgets 包中的 awesomeCheckboxGroup 在闪亮的应用程序中创建复选框。默认情况下，它们具有蓝色背景。我可以使用参数status = 更改背景颜色，但这仅限于五种状态颜色。

我相信我应该能够使用 CSS 制作自定义状态，并将其传递给参数。但是，当我检查该页面时，我完全不知道要更改哪些相关位。我在任何地方都看不到提到的蓝色！我也尝试过更改状态以防我在那里看到相关代码更改，但这也对我没有帮助。

我只在这样的应用程序的上下文中使用过 CSS，如果我遗漏了一些明显的东西，我深表歉意。当然，也对使用替代方法的解决方案感到满意！

编辑：我现在已经确定了元素，所以我可以改变颜色！缺点是它也会影响页面的另一部分。在我的实际工作中，这并不重要，因为我实际上正在更改为与标题相同的颜色，所以这并不明显 - 但有没有办法更具体并只为复选框着色？

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)

【问题讨论】：

标签： css r shiny

【解决方案1】：

成功！通过添加复选框输入的 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)

【讨论】：

【解决方案2】：

查看此链接：How to change the background color on a input checkbox with css? - 您必须将任何内容包装在来自闪亮的标签调用中

【讨论】：

看过这个之后，它比我所追求的要复杂得多，但它确实帮助我确定了正确的元素。我想我可以简单地改变这一点，而不需要创建我自己的。将发布我所做的。