How do I style a shinyWidgets::multiInput()

Question

I am working on a multi select input control from {shinyWidgets}, but the default font color makes it difficult to read.

Here is an example:

library(shiny)
library(shinyWidgets)
  
ui <- fluidPage(
  multiInput(inputId = "id", label = "Datasets:", choices = 1:5), 
  verbatimTextOutput(outputId = "res")
)

server <- function(input, output, session) {
  output$res <- renderPrint({ input$id })
}

shinyApp(ui = ui, server = server)

How can I change the font color?

Answer 1

You can style a multiselect input control (i.e., shinyWidgets::multiInput()) as desired with CSS.

To get some ideas about how to do this here is the relevant CSS file from the {shinyWidgets} github page, but because that file is minified and therefore difficult to read, you might instead look at the CSS file here.

Example app:

library(htmltools)
library(shiny)
library(shinyWidgets)
  
ui <- fluidPage(
  tags$style(
'
.multi-wrapper .non-selected-wrapper {
  background: black;
}
.multi-wrapper .selected-wrapper { 
  background: black; 
}
.multi-wrapper .item {
  color: white;
}
.multi-wrapper .non-selected-wrapper .item.selected {
  opacity: .5;
  color: white;
}
.multi-wrapper .selected-wrapper .item {
  color: white;
}
'
  ),
multiInput(
  inputId = "id",
  label = "Fruits :",
  choices = c(
    "Banana",
    "Blueberry",
    "Cherry",
    "Coconut",
    "Grapefruit",
    "Kiwi",
    "Lemon",
    "Lime",
    "Mango",
    "Orange",
    "Papaya"
  ),
  selected = "Banana",
  width = "350px"
), verbatimTextOutput(outputId = "res")
)

server <- function(input, output, session) {
  output$res <- renderPrint({
    input$id
  })
}

shinyApp(ui = ui, server = server)