Change Colour of Pickerinput Items in Shiny

Change colour of pickerInput items in Shiny

You can apply the style you want in its arguments:

library(shiny)
library(shinyWidgets)

col.list <- c("red","blue","green","orange")

# Change the color
colors <- paste0("color:",col.list,";")

# Change the font
colors <- paste0(colors,"font-family: Arial;")

# Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To change the background simply apply the background

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")
#Change the color
colors <- paste0("background:",col.list,";")
#Change the color
colors <- paste0(colors,"color:white;")
#Change the font
colors <- paste0(colors,"font-family: Arial;")
#Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To use the colors dynamically you can do the folowing:

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")

ui <- fluidPage(
  column(2,
         pickerInput("change", "Select Colour", choices = col.list,multiple = FALSE)
  ),
  column(2,
         pickerInput("col", "Colour", multiple=T, choices = col.list)
  )
)
server <- function(input, output,session){

  observeEvent(input$change,{
    
    colors <- rep(paste0("color:",input$change,";"),length(col.list))
    updatePickerInput(session, "col", choices = col.list,
                      choicesOpt = list(
                        style = colors
                      )
    )
  })
  
}

shinyApp(ui, server)

How to change the container color of a pickerInput element?

It should be better to wrap the pickerInput inside a div tag.

ui <- fluidPage(
    tags$head(tags$style("body{background:grey}")),
    fluidRow(
        tags$div(
            style = "margin-left:90px",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    )
)

If you need to apply this style to multiple pickerInput, it's still better to use div tags to wrap the pickerInput, and use class for CSS selector.

ui <- fluidPage(
    tags$head(
        tags$style(
            "body{
                background:grey;
            }
            .ident-picker {
                margin-left:90px;
            }"
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select1",
                label = "pickerInput",
                choices = c(3, 4, 8, 5, 2, 6, 7),
                options = list(title = "Please Select Desired Number")
            )
        )
    ),
    fluidRow(
        tags$div(
            class = "ident-picker",
            pickerInput(
                inputId = "select2",
                label = "pickerInput2",
                choices = letters,
                options = list(title = "Please Select Desired characters")
            )
        )
    )

)

Also, you can write a wrapper function on existing UI functions

library(shiny)
library(rlang)

actionButtonPretty <- function(inputId, label){
    actionButton(inputId, label, style="color: white; background-color:#003c69; border-color: #003c69; ")
}

ui <- fluidPage(
    actionButtonPretty("button1","Pretty Button 1"),
    actionButtonPretty("button2","Pretty Button 2")
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Change color of Picker Input in Shiny

I'm not sure if there's a more straightforward way, but you could use HTML from shiny to add any formatting you want with HTML syntax, like this for example:

'none-selected-text'=strong(HTML("<span style='color: white'>BUTTON TITLE:</span>"))

Edit

Using wrapper functions from shiny and with the center tag:

strong(tag('center', list(span(style='color: white', 'BUTTON TITLE:'))))

How to change the background color of the pickerInput() and also the options that are selected

I am able to change the background color of the selected options in the pickerInput() input by manually adding the following CSS at the top of my UI. You need to isolate the "selected" class, which is automatically applied to the cells that are selected.

tags$style(HTML("

.selected {background-color:blue !important;}

"))

How to dynamically style a pickerInput menu in Shiny

CSS <- function(colors){
  template <- "
.dropdown-menu ul li:nth-child(%s) a {
  background: %s !important;
  color: white !important;
}"
  paste0(
    apply(cbind(seq_along(colors), colors), 1, function(vc){
      sprintf(template, vc[1], vc[2])
    }),
    collapse = "\n"
  )
}

and

output$css <- renderUI({
  tags$style(HTML(CSS(cols_user())))
})

To deal with CSS, you should try the inspector tool (right-click on an element, then "Inspect").

change colour of selectizeInput options in R Shiny

Replacing my code with the above suggested code changed the drop down menu colour but NOT the individual items in the menu:

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a] {
          background: red !important;
          color: white !important;
        }
        .option[data-value=b] {
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

SOLUTION In order to achieve both items colour coded and the drop down. I needed to add .item to my code

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a], .item[data-value=a]{
          background: red !important;
          color: white !important;
        }
        .option[data-value=b], .item[data-value=b]{
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

This results in both the menu and drop down menu being coloured.

pickerInput font or background color

This is a bit of a hacky solution, but it may work for you, or at least send you down the right path.

You can use the choicesOpt argument of pickerInput to describe formatting for individual options within the dropdown menu. Specifying the colour, background, or weight there will change the relevant elements to whatever you choose. The trick is that the arguments apply to only the first choice, so you need to replicate the style argument for as many choices as you have. I've done this with rep() and I've just stuck a value there (10) to match choices, but you will likely want to define that value programmatically based on wherever your Commodity List data is from.

library(shiny)
library(shinyWidgets)

ui <- fluidPage(
  pickerInput("id", "Formatting changes", multiple=T, choices = sample(LETTERS, size = 10), 
              options = list(`actions-box` = TRUE, `live-search` = TRUE, 
                         `selected-text-format`= "static", title = "Commodity List"),
              choicesOpt = list(
                style = rep(("color: black; background: lightgrey; font-weight: bold;"),10)))
)

server <- function(input, output){}

shinyApp(ui, server)

How to change the pickerinput label to fine instead of bold

Try the css code below. You can remove the color: red line from css.

css <-"
#expr-container label {
  font-weight: 400;
  color: red; 
}
"

ui <- fluidPage(
  titlePanel("ShinyApp"),
  sidebarLayout(
    
    sidebarPanel(
      tags$style(css),
      tags$div(id = "expr-container", pickerInput(
        inputId = "Pick",
        label = "SampleSampleSample",
        choices = list(
          c("Sample"),
          Test_list = c("Test1", "Test2", "Test3")
        ),
        options = list(
          `actions-box` = TRUE,
          size = 7,
          `selected-text-format` = "count > 3"
        ),
        multiple = FALSE
      )),
    ),
    mainPanel(
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

---

Related Topics