如何更改 DT/Shiny 中 ColumnVisibility 按钮的颜色答案

【问题标题】：How to change the color of the ColumnVisibility buttons in DT/Shiny如何更改 DT/Shiny 中 ColumnVisibility 按钮的颜色
【发布时间】：2018-03-18 18:20:46
【问题描述】：

我正在使用 Shiny Dashboard 中的 DT 包构建表格。该表有几列，我使用 DT 的 ColVis 功能允许用户仅隐藏/显示他们感兴趣的列。

我的问题是 - 单击“列可见性”按钮后，是否可以更改这些按钮的颜色？截至目前，颜色还不够不同，如果不导航到表格，很难分辨哪些列是可见的，哪些列是不可见的。我已经包含了一个屏幕截图，显示了我的意思。 The Site_ID column is not visible in the table, while the Participant_ID column is.

我在谷歌浏览器中使用了检查元素来找出对象名称，它看起来是：a.dt-buttons.buttons-columnVisibility，并且在 body.skin-blue、div.dt-button-collection 下。

使用此信息，我在 ui.R 代码中添加了以下行：

tags$head(tags$style(HTML(".skin-blue .dt-button-collection .buttons-columnVisibility .active a{background-color: #4d4d4d}")))

但这似乎没有任何作用。任何有关在我的仪表板中实现此自定义 CSS/HTML 的帮助将不胜感激。

【问题讨论】：

标签： r shiny shinydashboard dt

【解决方案1】：

基于this answer，看起来按钮颜色需要用background设置。我还使用!important 覆盖了DT 按钮样式，虽然这是may not be the best practice。

这是一个小的工作示例：

library(DT)
library(shiny)

ui <- basicPage(
    tags$head(
        tags$style(
        HTML(
            ".dt-button.buttons-columnVisibility {
              background: #FF0000 !important;
              color: white !important;
              opacity: 0.5;
           }
        .dt-button.buttons-columnVisibility.active {
              background: black !important;
              color: white !important;
              opacity: 1;
           }"
             )
        )
        ),
    h2("The iris data"),
    DT::dataTableOutput("mytable")
)

server <- function(input, output) {
    output$mytable = DT::renderDataTable({
        datatable(
            iris, rownames = FALSE,
            extensions = 'Buttons', 
            options = list(dom = 'Bfrtip', buttons = I('colvis'))
        )
    })
}

shinyApp(ui, server)

【讨论】：