I want my Shiny select input to:

1. Has no label
2. Has customized background colour: #2f2d57
3. Has placeholder
4. Enable users to type-in and select

However, I can't make the app follow the above 4 rules together. My codes are below:

Data:

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

Attempt 1

Problem: Users are unable to type-in and select from the 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)

Attempt 2

Problem: By deleting selectize = F, users can type-in to select, but the background colour is not changed.

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)

I was also trying selectizeInput, but seems like it still has the same problem as above.

Attempt 3

Problem: Users can to type in, but the background colour is not changed, and there's a label at the top of selectizeInput which I don't want.

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)

Does anyone have ideas on how could I be able to satisfy all the 4 rules? Thanks in advance!

I want my Shiny select input to:

1. Has no label
2. Has customized background colour: #2f2d57
3. Has placeholder
4. Enable users to type-in and select

However, I can't make the app follow the above 4 rules together. My codes are below:

Data:

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

Attempt 1

Problem: Users are unable to type-in and select from the 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)

Attempt 2

Problem: By deleting selectize = F, users can type-in to select, but the background colour is not changed.

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)

I was also trying selectizeInput, but seems like it still has the same problem as above.

Attempt 3

Problem: Users can to type in, but the background colour is not changed, and there's a label at the top of selectizeInput which I don't want.

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)

Does anyone have ideas on how could I be able to satisfy all the 4 rules? Thanks in advance!

• javascript
• html
• css
• r
• shiny

• Check out the shinyWidgets package. – Travis Hinkelman Commented Oct 15, 2018 at 21:05
• Hey @TravisHinkelman, I looked at it but still have no clue on how to change the background colour, has no label, and let users type- in to happen at the same time. Could you provide more clues? Many thanks! – Mr369 Commented Oct 15, 2018 at 21:35
• When you edit the Input with things such as selectize=F are you checking to see that the style tag is still ".selectize-dropdown-content"? Sometimes changing minute details of a shiny widget can change its html callsign as well. – Chabo Commented Oct 15, 2018 at 22:25

2 Answers 2

Here is a pure shiny solution:

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)

Here is an example using the shinyWidgets package:

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)

EDIT: In the code above, I used the same code structure provided in the question, but, for this simple example, there is no reason to have code for the UI elements on the server side. Here is an alternative example:

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)