Shiny R Selectize Input widget size target the input - input

Question

I have multiple selectizeInput in my Shiny app. Most of them are not supposed to be full of variables/elements, but one of them yes. The problem is the more variables/elements in the box, the larger is this one and the display is not good at all. I have found solutions to manipulate the height, font, width, etc. of a input widget:
library(shiny)
ui <- fluidPage(
fluidRow(
selectInput("speed", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1),
tags$head(tags$style(HTML(".selectize-input {height: 100px; width: 500px; font-size: 100px;}")))
)
)
server <- function(input, output){}
shinyApp(ui, server)
This works. But this solution affects to all the selectizeInput I have in my app, I'm interested in just target one selectizeInput. Is there a way to do that?

Answer 1

You can use some advanced CSS to select the .selectize-input box. So in selectInput structure, the element with the actual id is assigned to a select tag and the box you want is the first child of the following tag after the select tag. We can use + to select the following tag and use > to select the first child containing the .selectize-input class of the following tag.
library(shiny)
ui <- fluidPage(
tags$head(tags$style(HTML("#speed + div > .selectize-input {height: 100px; width: 500px; font-size: 100px;}"))),
fluidRow(
selectInput("speed", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1),
selectInput("speed2", label=NULL, choices = list("1" = 1, "2" = 2), selected = 1)
)
)
server <- function(input, output){}
shinyApp(ui, server)
#ID + div > .selectize-input is what you want to apply.
Try to run my example, I created two selectInput and only the first one will have the CSS style.