如何更改 shinyWidgets::autonumericInput() 的字体大小

How change font size of shinyWidgets::autonumericInput()

使用 tags$style 我可以改变 numericInput 字段中文本的外观,包括字体大小。

使用 tags$style 我可以改变 shinyWidgets::autonumericInput 字段中文本外观的某些方面。颜色和样式改变,但字体大小不变。

如何更改字体大小?

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)

您的 css 规则已被覆盖。您必须添加 !important 修饰符:

  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;}"
    ),
  )