Home > front end >  How to change the color of picker input label shinyWidgets?
How to change the color of picker input label shinyWidgets?

Time:11-09

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)

CodePudding user response:

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).

  • Related