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 them in the app. I would like to just manipulate individual menus. I'm also considering adding style to individual elements based on conditionals happening in the server, but that's for another separate question.

test app code:

library(shiny)
library(shinydashboard)
library(shinyjs)
ui  <- 
  fluidPage(
  hr("how do we get the change the style elements of a single select input?) 
tags$style(type='text/css',  .selectize-input  { font-size: 8px; line-height: 8px;} 
             .selectize-dropdown { font-size: 8px; line-height: 8px; }"),

    selectInput("choice", "choices", c("A", "B", "C")),

    selectInput("choice2", "choices", c("D", "E", "F"))
     )

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

This approach comes straight from Dean Attali's answer here: examp, and a similar question is asked as final comment, but no answer, so I decided to post a question on the matter since I have the same problem.

for other elements likea textInput field, the way I usually do this is by this:

tags$style(type='text/css', "#NAMEELEMENT {background-color: green; height: 40px; border-color: #bfbfbf; width: 520px; position: relative;left: 3%}"), 

where you can attach the tag$style to an element by # and its inputId.

Cheers.

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.