Change font family/size/style of R Shiny textInput instructions

Question

How do I go about changing the actual text of the textInput?

So for instance:

 library(shiny)

 ui <- fluidPage (textInput("id","Enter your Member ID" ))

 server <- function(input,output,session){}

 shinyApp (ui = ui, server = server)

I want to change the font of the "Enter your Member ID" If possible - can I do this globally so that all my shiny fonts will be the same? ie all will be font-family: 'BentonSans Book';

Thanks for the help!

Answer 1

To change the font of all labels:

ui <- fluidPage (
  tags$head(
    tags$style("label{font-family: BentonSans Book;}")
  ),
  textInput("id","Enter your Member ID" )
)

Answer 2

I would comment on this but I don't have enough reputation.

However, if you want to change the fontFamily globally across all elements, you can do something like:

* { font-family: BentonSans Book; } * { font-family: BentonSans Book; } . What this will do is affect every element on your page and set it globally to that fontfamily. However, if you only want the specific html elements that are generated by that script, first find out what html element it is and then you can do something like this:

input { font-family: BentonSans Book; } input { font-family: BentonSans Book; } if it is an input tag that the script is outputting the html that is.

Answer 3

To expand on Stéphane's answer, I ended up customizing my input box with "label" as one font and "input" as another, like this:

    ui <- dashboardPage(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "shiny.css"),
      tags$style("input {font-family: Courier; font-size:16px; font-weight:bold;}"),
      tags$style("label {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size:16px; font-weight:bold;}")
    ),
    body = body,
    header = header,
    sidebar = sidebar,
)

Note for those trying to use a separate css file; for the life of me I couldn't override some of Shiny's defaults by changing the style of elements in the linked css. I was finally only able to change input font in the user interface.