How to style an single individual selectInput menu in R Shiny?

Question

Can you apply css style to a single selectInput menu?

I\'ve found code in other articles that deal with styling selectInput menu\'s but the outcome affects all of t

Answer 1

Thanks for this, very useful!

I wrapped up your answer in a working example:

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('
    .selectize-input {white-space: nowrap}
    #input1+ div>.selectize-dropdown{width: 660px !important; font-style: italic; font-weight: bold; color: green;}
    #input1+ div>.selectize-input{width: 660px !important; font-style: italic; font-weight: bold; color: green; margin-bottom: -10px;}
    #input2+ div>.selectize-dropdown{width: 300px !important; color: red;}
    #input2+ div>.selectize-input{width: 300px !important; color: red; margin-bottom: 0px;}
                            '))),

  selectizeInput("input1", "label1", c("A", "B", "C")),
  selectizeInput("input2", "label2", c("D", "E", "F"))
)

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

Answer 2

I found the answer myself. Combination of determination, lots of hours on google and Stackoverflow etc with some info I found created by Dean Atali I believe, but this seems to do it:

  tags$head(tags$style(HTML('.selectize-input {white-space: nowrap}
    #choice+ div>.selectize-dropdown{width: 660px !important}
    #choices+ div>.selectize-dropdown{width: 300px !important}')))

Answer 3

Wrap your selectInput in a div:

tags$div(id='my_div',
         class='my_class',
         selectInput("choice",
                     "choices",
                      c("A", "B", "C"))),

Then you can style it without affecting other selectInput elements:

#my_div .selectize-dropdown-content > .option {
   background-color: grey;
}

or

.my_class .selectize-dropdown-content > .option {
   background-color: grey;
}

As always with CSS, use id to name and to catch a single element, and class to style multiple elements.