I am striving to customize my Shiny select input in the following ways:
- Eliminate the label
- Set a unique background color:
#2f2d57 - Include a placeholder
- Enable users to both type-in and select
Despite my efforts, I have not been successful in aligning all of the above criteria simultaneously. Please see my code below:
Data:
table <- data.frame(col1 = c(3, 4, 8, 5, 2, 6, 7))
Attempt 1
Issue: Users cannot input text and select from the selectInput field
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
Issue: Removing selectize = F enables users to type in the input field, but the background color remains unchanged.
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 also attempted using selectizeInput, but encountered the same issues as before.
Attempt 3
Issue: Users can input text, but the background color remains unchanged and there is a label at the top of selectizeInput that I wish to remove.
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)
Any suggestions on how to achieve all 4 customization rules would be greatly appreciated. Thank you in advance!