CODEWITHSUNDEEP
rshiny
Run
Run

Reputation: 57176

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

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?

Upvotes: 19

Views: 20771

Answers (2)

Tara
Tara

Reputation: 11

Adding (#) before select will also solve your issue.

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

Upvotes: 1

DeanAttali
DeanAttali

Reputation: 26313

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) {
  }
))

Upvotes: 35

Related Questions