How to control font-size style separately for label and choices text for selectInput in Shiny?

Question

I have a selectInput widget in Shiny.

I want to control the font-size separately for both the label argument, and for the input text of the widget itself (i.e., the text of the choices and selected arguments).

The initial [style-less] output looks like this:

selectInput(inputId = "inId", label = "Different Font Size...", choices = "...From This")

I tried using div() like so:

div(style = "font-size: 8px", 
    selectInput(inputId = "inId", label = "Different Font Size...", choices = "...From This")

)

Which shrinks both the label text and the input text (i.e., the text from choices).

• Note: this is in contrast to using this div(style = ...) approach for textInput, which instead only impacts the label text (and not the input text).

  • In this instance, I would then use tags$style("#inId {font-size:8px;}") following the textInput function to modify the input font size separately.

    div(style = "font-size: 8px", 
        textInput(inputId = "inId", label = "Different Font Size...", value = "...From This")
    ), tags$style("#inId {font-size:14px;}")
    

However, this does not work using selectInput().

• Designating a tag$style(...) following a div(style = ...) wrapper doesn't seem to do anything to the resulting text style.

    div(style = "font-size: 8px", 
        selectInput(inputId = "inId", label = "Different Font Size...", choices = "...From This")
    ), tags$style("#inId {font-size:14px;}")
    )
  

So how do I do this?

How do I control the text styling (specifically font-size) separately for the label and choices text for a selectInput widget using Shiny?

• Again, my goal is to achieve the ability to do the following:

  

---

^{If it matters: I'm using shiny_1.0.3 with R version 3.4.0}

Answer 1

You can wrap both the whole selectInput() as well as the label itself in a div() with separate font-sizes. The style of the label will overwrite the style of the outer div.

shinyApp(
  ui = fluidPage(
    div(style = "font-size:20px;",
      selectInput(inputId = "inId", label = div(style = "font-size:80px", "Different Font Size..."), 
                  choices = c("...From This", "Test")
                  )
      )
  ),
  server = function(input, output) {

  }
)

I hope this helps.
Cheers