Reputation: 2400
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)
Upvotes: 1
Views: 530
Reputation: 10627
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;}"
),
)
Upvotes: 2