Background color of the active tab in Shiny app

Stéphane Laurent 0
Viewed 23

This question has been previously deleted while I was working on it. How to change the background color of the active tab in a Shiny app?

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  tabsetPanel(
    tabPanel("t0", h2("tab 0")),
    tabPanel("t1", h2("tab 1"))
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)
shiny r css html
1 Answers

Here is a way:

css <- "
.nav-tabs > li.active > a { 
    background-color: lightgrey;
}
.tab-pane.active {
    background-color: lightgrey;
    position: absolute;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
}
"

library(shiny)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  tabsetPanel(
    tabPanel("t0", h2("tab 0")),
    tabPanel("t1", h2("tab 1"))
  )
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

The first part of the CSS is for the "knob" of the tab (I don't know the correct wording), and the second part is for the body of the tab.

Note that the CSS property -webkit-fill-available may not work in all browsers. It works in Chrome and Edge. Googling it should give the equivalent property name for others browsers.

Stéphane Laurent0
Related