1

Using tags$style I can alter the appearance of the text in a numericInput field, including the font-size.

Using tags$style I can alter some aspects of the appearance of the text in a shinyWidgets::autonumericInput field. The color and style change, but the font-size does not.

How do I alter the font-size?

library("shiny")
library("bslib")
library("shinyWidgets")

ui <- bootstrapPage(
  
  # Format Travel Summary
  tags$head(
    tags$style("#first{
                 color: green; 
                 font-size: 26px; 
                 font-style: italic;}"
    ),
    tags$style("#second{
                 color: red; 
                 font-size: 9px; 
                 font-style: italic;}"
    ),
  ),
  
  theme = bs_theme(version = 5, bootswatch = "minty"), 
  div(class = "container-fluid",
      
     
      div(class = "row",
          
          div(class = "col-4",
              HTML('<b>First</b>'),
              numericInput(
                inputId = "first", 
                label = NULL, 
                value = 55
              )
          ),
          
          div(class="col-4", 
              HTML('<b>Second</b>'),
              autonumericInput(
                inputId = "second", 
                label = NULL, 
                value = 255, 
                currencySymbol = "$",
                currencySymbolPlacement = "p",
                decimalPlaces = 0,
                minimumValue = 0,
                maximumValue = 9000,
                width = "160px"
              ),
          ),
        )
  )
)
  
  server <- function(input, output) {
  }
  
  shinyApp(ui = ui, server = server)
ixodid
  • 2,180
  • 1
  • 19
  • 46

1 Answers1

2

Your css rule was overwritten. You have to add the !important modifier:

  tags$head(
    tags$style("#first{
                 color: green; 
                 font-size: 26px  !important; 
                 font-style: italic;}"
    ),
    tags$style("#second{
                 color: red; 
                 font-size: 9px !important; 
                 font-style: italic;}"
    ),
  )

enter image description here

danlooo
  • 10,067
  • 2
  • 8
  • 22