cssrshinydt

Change color of datatable filter dropdown box


I would like to change the color of this dropdown box which appears for numeric filters.

enter image description here

Sample code:

library(DT)
library(shiny)

ui <- basicPage(
  h2("The mtcars data"),
  DT::dataTableOutput("mytable")
)

server <- function(input, output) {
  output$mytable = DT::renderDataTable({
    DT::datatable(mtcars,filter="top")
  })
}

shinyApp(ui, server)

Solution

  • You only have to modify the suitable CSS on the ui function:

    ui <- basicPage(
        h2("The mtcars data"),
        DT::dataTableOutput("mytable"),
        tags$style(type = "text/css",
                   ".noUi-connect {background: red;}")
    )
    

    enter image description here

    Update

    As explained in the comments, you can see in the next image (open it to see larger) where is the CSS modified to get a dark red where you want (in the right column of left window above is the element.style to which my comment below refers). The issue I am not able to solve is how to modify that tag (the shadowed one at the left) ` without a class or an id, with CSS or Shiny.

    enter image description here