rshinyshinywidgets

How do I style a shinyWidgets::multiInput()


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?


Solution

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

    Contents of www/shinyWidgets_multiInput.css

    .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;
    }
    

    Contents of app.R

    library(shinyWidgets)
    
    ui <- fluidPage(
      tags$head(
        tags$link(
          rel = "stylesheet", 
          type = "text/css", 
          href = "shinyWidgets_multiInput.css"
        )
      ),
      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)
    

    Output

    enter image description here

    Reprex files hosted with on GitHub