SelectizeInput 禁用时变得不透明

Question

我正在开发一个闪亮的应用程序，其中我使用

bslib

包进行主题化。但是，当我禁用输入（如下所示）时，它将变得不可读：

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)

有没有办法我仍然可以使用

bs_theme(preset = "shiny")

，但对于禁用的输入具有更透明的外观，就像默认主题一样：

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

您可以覆盖禁用状态下的项目的 CSS 样式。或者您可以使用

lock

方法定义锁定状态下的项目的 CSS 样式（默认情况下此类项目没有特定的 CSS 样式）：

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)