CODEWITHSUNDEEP
htmlcssrfontsshiny
Ellie
Ellie

Reputation: 415

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

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? i.e. all will be font-family: 'BentonSans Book';

Thanks for the help!

Upvotes: 3

Views: 5946

Answers (3)

KeelyD
KeelyD

Reputation: 161

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.

Upvotes: 1

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

To change the font of all labels:

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

Upvotes: 4

InoCuro
InoCuro

Reputation: 135

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; }. 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; } if it is an input tag that the script is outputting the html that is.

Upvotes: 2

Related Questions