Shiny selectInput CSS affecting all selectInputs

Question

I have the following css above a selectizeInput so that selected items are coloured alternatively making for better readability.

tags$style(HTML(".item:nth-child(odd) {background: #F4F4F4 !important;
                                       width: 100% !important;}
                 .item:nth-child(even) {background: white !important;
                                        width: 100% !important;}"))

Unfortunately it is affect all other selectizeInputs and selectInputs no matter where on the dashboard they appear.

How can I have the above css only apply to the one selectizeInput.

Thanks

Assign the CSS to an id using #id where 'id' is the name of the input. — Ryan Morton
Thanks. I'm new to CSS so... I added #selectFilter.item:nth-child(odd)(...) but to no effect, in fact I even lost the customisation - I also added it to even as well. selectFilter is the ID of the selectizeInput(). So I must be doing something wrong — Andrew Scotchmer
I think the selectize selections is in a different div than the selectInput — Ryan Morton

Ryan Morton Ryan Morton · Accepted Answer · 2018-03-15T17:01:00

I think getting the CSS to select the proper <div> is the trick. Here's a reproducible example of the functionality using the default Shiny scaffolding:

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

   # Application title
   titlePanel("Control CSS of Singl Selectize Input"),

   # Sidebar with a slider input for number of bins 
   sidebarLayout(
      sidebarPanel(
        tags$style(HTML("#bins+ .selectize-control.multi .selectize-input > .item:nth-child(odd) {background: #F4F4F4 ;
                                       width: 100% !important;}
                        #bins+ .selectize-control.multi .selectize-input > .item:nth-child(even) {background: white ;
                        width: 100% !important;}")),
         selectizeInput("bins",
                     "Number of bins:",
                     choices = c(1:50),
                     selected = 30,
                     multiple = TRUE),
        selectizeInput("newbins",
                       "Number of bins:",
                       choices = c(1:50),
                       selected = 30,
                       multiple = TRUE)
      ),

      # Show a plot of the generated distribution
      mainPanel(

      )
   )
)

# Define server logic required to draw a histogram
server <- function(input, output) {


}

# Run the application 
shinyApp(ui = ui, server = server)

The CSS first finds the right id then finds the correct div below that using class. More info on the + sign in CSS: https://www.w3schools.com/cssref/sel_element_pluss.asp

Shiny selectInput CSS affecting all selectInputs

1 Answers