Блестящие настройки selectInput / selectizeInput

Question

Я хочу, чтобы мой Shiny Select выбрал:

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)

Попытка 2

Проблема: удаляя 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)

У кого-нибудь есть идеи о том, как я могу удовлетворить все 4 правила?Заранее спасибо!

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)

Answer 2

Ниже приведен пример использования пакета woolWidgets:

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)

РЕДАКТИРОВАТЬ: В приведенном выше коде я использовал ту же структуру кода, которая указана в вопросе, но для этого простого примера нет причиниметь код для элементов пользовательского интерфейса на стороне сервера.Вот альтернативный пример:

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)