在 Shiny 中设置多个进度条的单独颜色

Question

如何在一个 fluidRow() 中设置多个 fileInput() 进度条的背景颜色。这与给定的答案类似，但是，这次它仅适用于多个 fileInput() 对象。我想做类似下面的片段的事情，但是当我运行这个时，它们不是三种颜色，而是相同的颜色 (#cfa646)。 （免责声明，我的 html 知识是不存在的，所以我只是想用给定的片段演示这个概念。）

library(shiny)

ui <- fluidPage(

    fluidRow(column(4,
                  tags$head(tags$style(".progress-bar{background-color:#3c763d;}")),
                  fileInput("dataUpload_1","Label 1",width = "400px")),
           column(4,
                  tags$head(tags$style(".progress-bar{background-color:#bf37a4;}")),
                  fileInput("dataUpload_2","Label 2",width = "400px")),
           column(4,
                  tags$head(tags$style(".progress-bar{background-color:#cfa646;}")),
                  fileInput("dataUpload_3","Label 3",width = "400px")))
     

  )


  server <- function(input, output){


  }

  shinyApp(ui=ui, server=server)

Answer 1

不错的尝试，您已经很接近了，但是正如您所提到的，这确实需要一些高级 CSS 知识。方法如下：

:nth-of-type() selector

library(shiny)

ui <- fluidPage(
    tags$head(tags$style(
        '
        .myfiles .col-sm-4:nth-of-type(1) .progress-bar {background-color:#3c763d;}
        .myfiles .col-sm-4:nth-of-type(2) .progress-bar {background-color:#bf37a4;}
        .myfiles .col-sm-4:nth-of-type(3) .progress-bar {background-color:#cfa646;}
        '
    )),
    fluidRow(
        class = "myfiles",
        column(4, fileInput("dataUpload_1","Label 1",width = "400px")),
        column(4, fileInput("dataUpload_2","Label 2",width = "400px")),
        column(4, fileInput("dataUpload_3","Label 3",width = "400px"))
    )
)


server <- function(input, output){}

shinyApp(ui=ui, server=server)

在 Shiny 中设置多个进度条的单独颜色

Set individual color of multiple progress bars in Shiny

html

r

shiny