如何为ShinyWidgets的progressBar()设置自定义颜色？

Absolutely! You can set a fully custom color for shinyWidgets::progressBar()—your initial approach using CSS is on the right track, but there's a small tweak needed to target the correct element. Let me break down the proper implementation for you:

Key Fix for Your Initial CSS #

The selector .progress-bar-status doesn’t match the actual class generated by progressBar(). When you use the status parameter, the progress bar gets a class formatted as .progress-bar-{your-status-value}. For example, if you set status = "custom", the corresponding class becomes .progress-bar-custom.

Step-by-Step Solution #

1. Assign a custom status value to your progress bar. This creates a unique CSS class you can specifically target.
2. Write custom CSS with tags$style() to override the background (and text, if desired) color for that class. Use !important to ensure your style takes priority over shinyWidgets' default styles.

Full Working Example #

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  # Custom CSS targeting our progress bar
  tags$style(
    ".progress-bar-my-custom-green {
      background-color: #25c484 !important; /* Your custom background color */
      color: #ffffff !important; /* Optional: White text for better contrast */
    }"
  ),
  
  # Progress bar with matching custom status
  progressBar(
    id = "custom_progress",
    value = 65,
    status = "my-custom-green", # Matches the CSS class suffix
    display_pct = TRUE
  )
)

server <- function(input, output, session) {
  # Optional: Add logic to update the progress bar dynamically
  # updateProgressBar(session, "custom_progress", value = 80)
}

shinyApp(ui, server)

Bonus: Target All Progress Bars #

If you want to change the color for every progress bar in your app, skip the custom status and target the base .progress-bar class directly:

.progress-bar {
  background-color: #25c484 !important;
}

This will override the default color for all progress bars, no matter what status value they use.

内容的提问来源于stack exchange，提问作者mizzlosis