I’m building a simple Shiny App, and have a decent understanding (or so I thought) of CSS and how to use it to style different UI elements (background color, size, etc.).

The issue I’m having is that I’m using renderUI() a lot in my app, because I need the inputs to be reactive to one another. When I move the selectInput() from the ui portion of the app into the server section (and use it inside renderUI()), it now seemingly ignores the CSS. What gives?

Here’s the first example, NOT using renderUI(), and the CSS (in this case, just a smaller 6px font-size for the selectInput() text) works fine:

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('.selectize-input {font-size: 6px;}'))),
  shiny::selectInput("input_1", label = NULL, choices = c("a", "b", "c"))
  )
)
server <- function(input, output, session){}
shinyApp(ui = ui, server = server)

Result:

Then I move the selectInput() call into a renderUI() function in the server section, and the CSS doesn’t get applied, even though I’m not changing that part at all. Shouldn’t the CSS rules still be applied to all .selectize-input elements?

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('.selectize-input {font-size: 6px;}'))),
  shiny::uiOutput(outputId = "output_1")
)
)

server <- function(input, output, session){
  
  output$output_1 = shiny::renderUI({
    shiny::selectInput("input_1", label = NULL, choices = c("a", "b", "c"))
  })
  
}
shinyApp(ui = ui, server = server)

Result:

Any help would be greatly appreciated – thanks!