R shiny: color fileInput button and progress bar

Question

Is there a way to color fileInput button in R shiny? It looks like it is possible as shown here on this page on github. However I cannot find the code for this to be done.

This is the simple application that I would like to modify to have the button and progress bar colored red.

In ui.R :

library(shiny)

shinyUI(fluidPage(
  titlePanel("Test"),
  fileInput("Test","")
))

and server.R

library(shiny)

shinyServer(
  function(input, output) {
  }
)

Thanks for any advice.

Answer 1

You can use standard Bootstrap classes to style action buttons:

library(shiny)

shinyApp(
    ui=shinyUI(bootstrapPage(
        actionButton("infoButton", "Info", class="btn-info"),
        actionButton("warningButton", "Warning", class="btn-warning"),
        actionButton("successButton", "Success", class="btn-success"),
        actionButton("dangerButton", "Danger", class="btn-danger"),
        actionButton("defaultButton", "Default", class="btn-default"),
        actionButton("primaryButton", "Primary", class="btn-primary")
    )),
    server=shinyServer(function(input, output, session){
    })
)

Regarding file inputs as far as I know it is not possible without using CSS directly. Page you've linked is an opened pull-request and it doesn't look like it will be merged soon.

This answer provides a good description how to create fancy upload buttons with bootstrap. It should work just fine in Shiny as well.

Answer 2

CSS could be used in shiny to custom your fileInput widget ! Use the following code in order to color it in red.

NB - Any browser you're using to view the app should have developer tools that let you inspect elements and see styles applied to any element. You have to right click on the relevant element and choose inspect !

library(shiny)

ui <- fluidPage(
  fileInput(inputId = "Test",label = ""),
  tags$style("
             .btn-file {  
             background-color:red; 
             border-color: red; 
             }

             .progress-bar {
             background-color: red;
             }

             ")
  )

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)