How to Style an Single Individual Selectinput Menu in R Shiny

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

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}')))

Shiny selectInput CSS affecting all selectInputs

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

add CSS style to selectInput choices programatically

You can make a dynamic CSS style with renderUI:

library(shiny)

names <- c("A", "B", "C")
options <- data.frame(names)

cssTemplate <- function(color){
  sprintf(
    ".selectize-dropdown-content > .option,
     .selectize-input > .item 
     {
       color: %s; 
     }",
    color
  )
}
  
ui <- fluidPage(
  tags$head(
    uiOutput("css")
  ),
  selectInput("apkgs", "Select a package", choices = options$names),
 )
 
server <- function(input, output, session) {
   
  output[["css"]] <- renderUI({
    color <- ifelse(input$apkgs == "A", "green", "red")
    tags$style(HTML(cssTemplate(color)))
  })
  
}

shinyApp(ui, server)

EDIT by the OP

library(shiny)

names <- c("A", "B", "C")
installed <- c(TRUE, FALSE, FALSE)
options <- data.frame(names, installed)

ui <- fluidPage(
  tags$head(
    uiOutput("css")
  ),
  
  div(id="algo",
      selectInput("apkgs", "Select a package", choices = options$names)
      )
)

server <- function(input, output, session) {
  output$css <- renderUI({
    tags$style(
      HTML(unlist(
        lapply(names, function(x){
          if(options[options$names==x,]$installed) {
            sprintf("#algo .selectize-dropdown-content > .option[data-value='%s'] { color: green; }", x)
          } else {
            sprintf("#algo .selectize-dropdown-content > .option[data-value='%s'] { color: red; }", x)
          }
        })
        )
      )
    )
  })
}

shinyApp(ui, server)

Shiny: Different styles for textInputs and selectInputs

One solution that worked for me is for the textInput is actually quite easy, all I needed to do is in my css:

textInput(id, "")
tags$style(HTML("
#id.form-control{color:gray;}
"))

For the selectize input is a bit more confusing:

selectizeInput(id, ....)
tags$style(HTML("
#id + div>.selectize-input.items.not-full.has-options{border-bottom: 1px solid #F2F2F2;}
#id + div>.selectize-dropdown, #id+ div>.selectize-input, #id+ div>.selectize-input input{ color: gray;}
#id + div> div> .item {color: gray;}
"))

Change font color of select input choices R Shiny

Here is a way without reactive CSS. The select input is created in the server, this easily allows to use reactive dataframes.

library(shiny) 
library(jsonlite)

ui = fluidPage(
  tags$head(
    tags$style(
      HTML(
        "
        .red {color: red;}
        .blue {color: blue;}
        "
      )
    )
  ),
  br(),
  uiOutput("slctzUI")
)

server <- function(input, output, session){
  
  df <- data.frame("ID" = c("F001","N002","F003","T004","F005")) 
  
  values <- data.frame("AnimalID" = c("F001","F003","T006", "T008"))
  
  choices <- unique(df[["ID"]])
  
  colors <- ifelse(choices %in% values[["AnimalID"]], "blue", "red")
  names(colors) <- choices
  colors <- toJSON(as.list(colors))
  
  output[["slctzUI"]] <- renderUI({
    selectizeInput(
      "slctz", "Select something:",
      choices = choices, 
      options = list( 
        render = I(sprintf("{
        item: function(item, escape) { 
          var colors = %s;
          var color = colors[item.label];
          return '<span class=\"' + color + '\">' + item.label + '</span>'; 
        },
        option: function(item, escape) { 
          var colors = %s;
          var color = colors[item.label];
          return '<span class=\"' + color + '\">' + item.label + '</span>'; 
        }
      }", colors, colors))
      )
    )
    
  })
  
}

shinyApp(ui, server)

Sample Image

Coloring the options in a selectInput in R Shiny

I would recommend using CSS. For more on how to style a Shiny application with CSS see this article.

I have included a demo application which includes CSS as a string. In practice I would store CSS styles in a separate file, see the article linked above. If you are not familiar with CSS I will briefly summarize the selectors used, more on CSS selectors here.

Summary of CSS selectors,

#my_select_input looks for a tag with id my_select_input
~ .selectize-control says we actually want a sibling tag of #my_select_input and that sibling must have the class selectize-control
.option says we want child tag(s) of the above tag(s) and those child tag(s) must have the class option
finally, the :nth-child(odd) and :nth-child(even) let us control which of the child tags are style will apply to, where odd selects the first, third, and fifth (etc.) child and even selects the second, fourth, and sixth (etc.) child.

With all that said, here is the demo application.

library(shiny)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$style("
        #my_select_input ~ .selectize-control .option:nth-child(odd) {
          background-color: rgba(30,144,255,0.5);

        }

        #my_select_input ~ .selectize-control .option:nth-child(even) {
          background-color: rgba(205,92,92,0.5);
        }
        "
      )
    ),
    selectInput(
      inputId = "my_select_input",
      label = "Select Letter", 
      choices = c("A", "B", "C", "D")
    )
  ),
  server = function(input, output) {

  }
)

If you wanted to apply the red/blue coloration to all selectize inputs in your application you could drop the #my_select_input ~ prefix. If you wanted to apply a variant of this style to a different selectize input you could change my_select_input and tweak the background color.
colored selectinput

How to change R Shiny 'selectInput' value selection display space background color when no value selected?

Some of the controls are in the css below

library(shiny)

css <- "
.selectize-dropdown-content .option {
  color: blue;
}
.selectize-input .item {
  color: red !important;
  background-color: yellow !important;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  background-color:red !important;
  color: white;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}"

ui <- fluidPage(
  tags$head(
    tags$style(HTML(css))
  ),
  br(),
  selectInput("my_select", "Choose: ", c("Please choose a site or say anything"='',"Site 1", "Site 2","Site 3", "Site 4"), 
              selectize = T),
  br()
)
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

output

How to Style an Single Individual Selectinput Menu in R Shiny