Shiny - How to Change the Font Size in Select Tags

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

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

How to change the font size of a pickerinput in Shiny?

Thanks to Victor P. from @dreamRs. He helped me solve this issue that I have been working on for a long time. Here is the solution:

library(shiny)
shinyApp(
  ui = fluidPage(
    tags$style(".my-class {font-size: 75%; line-height: 1.6;}"),
    
    shinyWidgets::pickerInput(
      inputId = "var",
      label = "Choose a variable to display",
      choices = c("Percent White", "Percent Black",
                  "Percent Hispanic", "Percent Asian"),
      selected = "Percent White",
      options = list(style = "my-class"),
      choicesOpt = list(
        style = rep_len("font-size: 75%; line-height: 1.6;", 4)
      ) # choices style
    )
  ),
  server = function(input, output) {}
)

We should add a class to the button with the selected value, then we can use this class to set some styles on the button.
This case is closed.

Change Font Size in R Shiny Input Options (shinyjqui)

library(shiny)
library(shinyjqui)

server <- function(input, output) {
    output$order <- renderPrint({ print(input$dest) })
}

ui <- fluidPage(
    orderInput('source', 'Source', items = month.abb,
               as_source = TRUE, connect = 'dest'),
    orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
    verbatimTextOutput('order'),
    tags$style(HTML(
        '
        .btn.shinyjqui {font-size: 5px}
        '
    ))
)

shinyApp(ui, server)

to also shrink the button

    tags$style(HTML(
        '
        .btn.shinyjqui {
            font-size: 5px;
            padding: 0;
        }
        
        '
    ))

Change the font inside tags in a shiny app

Why do you write it in server?

To globally apply styles, you need to add styles in head of HTML.

Add this as your dashboard body:

dashboardBody(
    tags$head(
        tags$style("h3 {font-family:Calibri}")
    )
)

How to change bold font size to the headings of groups in pickerInput() of shinyWidgets package?

You can add custom style to a Shiny app:

tags$head(tags$style(HTML(".dropdown-header .text { font-weight: bold }")))

Change the size /spacing of label text in R Shiny fileInput?

This article pretty neatly summarizes the three ways you can style Shiny with CSS. If you end up styling more than a few elements, it's often best to add the CSS through a style sheet (i.e. an actual .css file), which in Shiny needs to be placed in a subdirectory named "www", which in turn is in your app directory.

If you're styling just one element ("element" meaning a UI output from a function), and you want the styling to apply to the entire element, you can wrap the element in a div tag and use the style attribute like so:

div(
   fileInput("file1", "Choose CSV File",
               accept = c(
               "text/csv",
               "text/comma-separated-values,text/plain",
               ".csv")
   ), style="font-size:80%; font-family:Arial;"
)

If you only want to style one component of the element, as you've described, then you need to use the developer tools in your browser to figure out what HTML you can target for your styling. In the case of a fileInput label, an actual <label> HTML tag is our target. If you'd rather avoid needing a stylesheet, then you can add the necessary CSS through the third approach described in the Shiny article, which is through the tags function. You can add the following code to your UI (right at the top of fluidPage) to change the font and add padding below the label:

tags$head(
  tags$style(HTML(
    "label { font-size:80%; font-family:Times New Roman; margin-bottom: 
    20px; }"
  ))
)

---

Related Topics