Background color of the active tab in Shiny app

Question

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)

It was a duplicate - please see [this](https://stackoverflow.com/questions/35025145/background-color-of-tabs-in-shiny-tabpanel) or [this](https://stackoverflow.com/questions/47798850/change-background-color-of-tabpanel-when-it-is-active-or-hover-over-in-shiny) — ismirsehregal, Sep 16 '22 at 07:12
@ismirsehregal Ok. But the second link is for `navbarPage` and the first one only sets the colors of the "knob" of the tab, not the body. — Stéphane Laurent, Sep 16 '22 at 07:37
I see, you are right. However it was deleted by the post author - [I voted to undelete](https://stackoverflow.com/questions/73731160/set-the-color-of-active-tabpanel-in-a-shiny-app). — ismirsehregal, Sep 16 '22 at 08:10

score 1 · Answer 1 · answered Sep 15 '22 at 13:25

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.

Background color of the active tab in Shiny app

1 Answers1