Shiny - how to change the font size in select tags?

Question

How can I change the font size in select tags?

I tried with this code below but the font size does not change at all.

shinyUI(fluidPage(

  sidebarPanel(

    # Change the font size.
    tags$style(type='text/css', "select {font-size: 32px !important} "),

    # Species/ pollutant options
    selectInput(
        inputId = "species",
        label = "Species:",
        choices = c(...)
        ),
   ....

Any ideas?

Answer 1

You had the right idea, but the select input in shiny actually uses selectize JavaScript to show the UI instead of the traditional select HTML tag. That's why your CSS isn't catching.

What you want instead of the select CSS is ".selectize-input { font-size: 32px; }

However, if you only have that CSS then the dropdown menu options will still be the default size and also there will be no padding around the text which looks very awkward. Here's some CSS you might want to use:

.selectize-input { font-size: 32px; line-height: 32px;}
.selectize-dropdown { font-size: 28px; line-height: 28px; }

So adding that to an app gives this:

runApp(shinyApp(
  ui = fluidPage(
    tags$style(type='text/css', ".selectize-input { font-size: 32px; line-height: 32px;} .selectize-dropdown { font-size: 28px; line-height: 28px; }"),
    selectInput("test","Test", 1:5)
  ),
  server = function(input, output, session) {
  }
))