Search code examples
rshinyshinywidgets

How to change the color of picker input label shinyWidgets?


How do i change the color of the label in a pickerInput from shinyWidgets package? I want to change the color of "Product" to "white". I found only how to change the backround color and the color of the other text. Where do i have to include the changes into the code when i want it to change also the labels of other input widgets that eventually will be included?

library(shiny)
library(shinyWidgets)
library(bs4Dash)


ui <- dashboardPage(
  
      
  dashboardHeader(title = "TEST",
                  fixed= TRUE, 
                  disable = TRUE),
  
       
  dashboardSidebar(                        
                    sidebarMenu(
                      menuItem(
                        "A1",
                        tabName = "a1"
                      ),
                      
                      menuItem(
                        text = "Analyse",
                        tabName = "analyse",
                        
                        
                        pickerInput(
                          inputId = "product",
                          label = "Product",
                          choices = c("hjk", "cgh", "ölk", "cfh"),
                          options = list(title = "choose here")
                        ),
                        
                        
                        startExpanded = TRUE
                  
                        
                      )
                      
                    )
                    
  ),
  
      
  dashboardBody()
  
)

## Server-function -----

server <- function(input, output) {
  
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Solution

  • You can wrap the label in a div to achive this:

    library(shiny)
    library(shinyWidgets)
    library(bs4Dash)
    
    ui <- dashboardPage(
      dashboardHeader(
        title = "TEST",
        fixed = TRUE,
        disable = TRUE
      ),
      dashboardSidebar(sidebarMenu(
        menuItem("A1", tabName = "a1"),
        menuItem(
          text = "Analyse",
          tabName = "analyse",
          pickerInput(
            inputId = "product",
            label = div("Product", style = "color: white;"),
            choices = c("hjk", "cgh", "ölk", "cfh"),
            options = list(title = "choose here")
          ),
          startExpanded = TRUE
        )
      )),
      dashboardBody()
    )
    
    server <- function(input, output) {}
    
    shinyApp(ui = ui, server = server)
    

    If you want to apply this to all pickerInputs we can use JS and look for class control-label:

    library(shiny)
    library(shinyWidgets)
    library(bs4Dash)
    
    ui <- dashboardPage(
      dashboardHeader(
        title = "TEST",
        fixed = TRUE,
        disable = TRUE
      ),
      dashboardSidebar(sidebarMenu(
        menuItem("A1", tabName = "a1"),
        menuItem(
          text = "Analyse",
          tabName = "analyse",
          pickerInput(
            inputId = "product",
            label = "Product",
            choices = c("hjk", "cgh", "ölk", "cfh"),
            options = list(title = "choose here")
          ),
          pickerInput(
            inputId = "something",
            label = "Something else ",
            choices = c("hjk", "cgh", "ölk", "cfh"),
            options = list(title = "choose here")
          ),
          startExpanded = TRUE
        )
      )),
      dashboardBody(tags$script(
        HTML("[...document.getElementsByClassName('control-label')].forEach((el)=>{el.style.color = 'white';});"
        )
      ))
    )
    
    server <- function(input, output) {}
    
    shinyApp(ui = ui, server = server)
    

    Please see this related answer.

    Furthermore, you might want to check library(fresh).