cssrshinypickerinput

pickerInput changes css when using different multiple argument shinyWidget


I'm using multiple pickerInput from the shinyWidgets packages. Some have the argument multiple=FALSE and some multiple=TRUE. Apparently this returns in different css to the dropdown menu items. I would like to have al the pickerInputs with multiple=FALSE, to have the same css and check-mark icon as the the pickerInputs with multiple=FALSE argument. Here is some simple reproducible code:

library(shinyWidgets)
library(shiny)

shinyApp(
  ui = fluidPage(
    pickerInput(
      inputId = "FALSE",
      label = "multiple = FALSE",
      choices = c("a", "b", "c", "d"),
      multiple = FALSE,
      options = list("tick-icon" = "glyphicon glyphicon-check-mark") # doesn't work
    ),
    pickerInput(
      inputId = "TRUE",
      label = "multiple = TRUE",
      choices = c("a", "b", "c", "d"),
      multiple = TRUE
    )
  ),
  server = function(input, output) {
    NULL
  }
)

Output of pickerInputs with multiple=FALSE:

enter image description here

Output of pickerInputs with multiple=TRUE:

enter image description here

As you can see the pickerInputs with multiple=FALSE have a blue background when the item is selected. I don't want that and would like to have the same css as the other pickerInputs with multiple=TRUE. Does anyone know how we can use the same css to these pickerInputs?


Solution

  • We could use choicesOpt to change color and pickerOptions to get the tick.

    library(shinyWidgets)
    library(shiny)
    
    choice = c("a", "b", "c", "d")
    
    shinyApp(
      
      ui = fluidPage(
        pickerInput(
          inputId = "FALSE",
          label = "multiple = FALSE",
          choices = choice,
          choicesOpt = list(style = rep('color:black; background:white;',length(choice))),
          multiple = FALSE,
          options = pickerOptions(
            showTick = TRUE) 
        ),
        pickerInput(
          inputId = "TRUE",
          label = "multiple = TRUE",
          choices = choice,
          multiple = TRUE
        )
      ),
      server = function(input, output) {
        NULL
      }
    )