SelectizeInput becomes opaque when disabled

Question

I am developing a shiny app in which I use the bslib package for theming. However, when I disable the input as shown below it becomes unreadable:

library(shiny)
library(bslib)

ui <- page_fluid(
  shinyjs::useShinyjs(),
  theme = bs_theme(preset = "shiny"),
  selectizeInput("id1", "selection unreadable", choices = 1:3, multiple = T)  
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit =T, {
    shinyjs::disable('id1')
  })
  
}
shinyApp(ui, server)

Is there a way I can still use bs_theme(preset = "shiny") but with a more transparent look for disabled inputs like with the default theme:

ui <- fluidPage(
  shinyjs::useShinyjs(),
  selectInput("id1", "selection readable", choices = 1:3, multiple = T)
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit =T, {
    shinyjs::disable('id1')
  })
}
shinyApp(ui, server)

Answer 1

You can overwrite the CSS style of the items under the disabled status. Or you can use the lock method and define the CSS style of the items under the locked status (by default there's no particular CSS style for such items):

library(shiny)
library(bslib)

css <- "
.selectize-input.items.not-full.has-options.has-items.locked > .item {
  opacity: 0.7;
  background-color: #D3D3D3;
}"

ui <- page_fluid(
  tags$head(tags$style(HTML(css))),
  shinyjs::useShinyjs(),
  theme = bs_theme(preset = "shiny"),
  selectizeInput("id1", "selection readable", choices = 1:3, multiple = TRUE)  
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit = TRUE, {
    shinyjs::runjs("$('#id1')[0].selectize.lock();")
  })
  
}
shinyApp(ui, server)