Change R Shiny widget input text size

Question

So I have numInputs, and I want to change the text size of the number that actually appears inside the text box.

How would I achieve that?

Answer 1

The simplest way, as @warmoverflow says, is using CSS. Below are two examples of adding some CSS to a widget, the first one will be only applied to the element with the specified id and the second will be for all the elements of type number. I'm assuming that it is numericInput instead of numInputs, but it should works with any other input widget.

Option 1. Changes the CSS for a specific element

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("#myNumericInput {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

Option 2. Changes the CSS of all the elements of type number.

runApp(list(
  ui = shinyUI(fluidPage(
    tags$style("[type = 'number'] {font-size:50px;height:50px;}"),
    numericInput("myNumericInput", "Observations:", 10, min = 1, max = 100),
    numericInput("otherNumericInput", "Observations 2:", 10, min = 1, max = 100)
  )),
  server = shinyServer(function(input, output, session) {
  })
))

Please note that in addition to changing the font size, I also changed the heigh, this is to make sure that the box will be big enough to show the number with a different size.

Also, you could consider using a separate .css file to put all your custom styles.

Answer 2

Thanks, I just put

input[type="number"] {
  font-size: 18px;
}

into my CSS header style tags and it worked.