闪亮的定制selectInput/selectizeInput

Question

我希望我的Shiny选择输入框：

1. 没有标签
2. 有自定义的背景颜色：#2f2d57
3. 有占位符
4. 允许用户输入和选择

然而，我无法使应用程序同时遵循以上4个规则。我的代码如下：

数据：

table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))

尝试1

问题：用户无法在selectInput中输入和选择。

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style("#three_code_zip_selector {color: #ffffff; background-color: #2f2d57;}"),
      selectInput('three_code_zip_selector', NULL, choices = c("Please Select Desired Number" = "", table$col1), selectize = F)
    )
  })
}

shinyApp(ui = ui, server = server)

尝试二

问题：删除 selectize = F 后，用户可以输入以进行选择，但背景颜色未更改。

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style("#three_code_zip_selector {color: #ffffff; background-color: #2f2d57;}"),
      selectInput('three_code_zip_selector', NULL, choices = c("Please Select Desired Number" = "", table$col1))
    )
  })
}

shinyApp(ui = ui, server = server)

我也尝试使用 selectizeInput，但似乎仍然存在与上述相同的问题。

尝试3

问题：用户可以输入文字，但背景颜色没有改变，并且在 selectizeInput 的顶部有一个我不想要的标签。

ui <- fluidPage(
  uiOutput("container")
)
server <- function(input, output) {

  output$container <- renderUI({
    fluidRow(
      tags$style(".selectize-dropdown-content .active {background: #2f2d57; !important;color: #ffffff; !important;}"),
  selectizeInput('three_code_zip_selector', "s", choices = c("Please Select Desired Number" = "", table$col1))
    )
  })
}

shinyApp(ui = ui, server = server)

有谁有关于如何满足这四个规则的想法吗？先提前感谢您！

- Mr369

---

请查看 shinyWidgets 包。 - Travis Hinkelman

嘿@TravisHinkelman，我看了一下，但仍然不知道如何更改背景颜色，没有标签，并且让用户同时输入。你能提供更多线索吗？非常感谢！ - Mr369

当您使用selectize=F等方式编辑输入时，您是否检查样式标签仍为".selectize-dropdown-content"？有时候改变shiny小部件的细节也会改变其HTML调用标识。 - Chabo

Answer 1

这里有一个纯粹而光亮的解决方案：

library(shiny)

table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))

ui <- fluidPage(
  tags$head(tags$style(HTML('
                            #three_code_zip_selector+ div>.selectize-dropdown{background: #2f2d57; color: #ffffff;}
                            #three_code_zip_selector+ div>.selectize-input{background: #2f2d57; color: #ffffff;}
                            '))),
  selectizeInput(inputId = 'three_code_zip_selector', label = NULL, choices = table$col1, selected = NULL, multiple = TRUE, options = list('plugins' = list('remove_button'), placeholder = "Please Select Desired Number", 'create' = TRUE, 'persist' = TRUE)))


server <- function(input, output, session){}
shinyApp(ui = ui, server = server)

- ismirsehregal

---

对于那些在2023年看到这篇文章的人，你也可以将selectInput包装在div()中，然后在该div内使用tags$style，并在tags$style调用中使用"#inputs_id {CCS code}"。因此，div(tags$style("#input1 {background: black;}", selectInput("input1", ...). - Bajcz

Answer 2

这里是使用shinyWidgets包的示例：

library(shinyWidgets)

ui <- fluidPage(
  uiOutput("container")
)

server <- function(input, output) {
  table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))
  output$container <- renderUI({
    fluidRow(
      pickerInput(
        inputId = "three_code_zip_selector",
        label = NULL, 
        choices = table$col1,
        options = list(
          title = "Please Select Desired Number",
          `live-search` = TRUE,
          style = c("background: #2f2d57; color: #ffffff;"))
      )
    )
  })
}

shinyApp(ui = ui, server = server)

编辑：在上面的代码中，我使用了问题中提供的相同代码结构，但是对于这个简单的示例，没有理由在服务器端拥有UI元素的代码。下面是一个替代示例：

library(shinyWidgets)

ui <- fluidPage(
  fluidRow(
    pickerInput(
      inputId = "three_code_zip_selector",
      label = NULL, 
      choices = c(3, 4, 8, 5, 2, 6, 7),
      options = list(
        title = "Please Select Desired Number",
        `live-search` = TRUE,
        style = c("background: #2f2d57; color: #ffffff;"))
    )
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

- Travis Hinkelman

---

嗨，非常感谢您的回答，但是代码根本没有改变pickerinput的颜色。也许我需要使用CSS并强制更改颜色？ - Mr369

嗯...对我来说它改变了pickerInput的颜色为深灰色，没有使用CSS。你是指实时搜索框的颜色吗？ - Travis Hinkelman