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.

This is purely a CSS question. AFAIK it's not easy because it's browser dependent, but your best bet would be to google "colour file input css". There are probably lots of stackoverflow threads about it because it's not a trivial problem — DeanAttali, Sep 10 '15 at 08:22

score 6 · Answer 1 · edited May 23 '17 at 11:52

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.

score 5 · Answer 2 · answered Dec 28 '18 at 13:49

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)

R shiny: color fileInput button and progress bar

2 Answers2

Linked