Change Colour of Selectizeinput Options in R Shiny

change colour of selectizeInput options in R Shiny

Replacing my code with the above suggested code changed the drop down menu colour but NOT the individual items in the menu:

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a] {
          background: red !important;
          color: white !important;
        }
        .option[data-value=b] {
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

SOLUTION In order to achieve both items colour coded and the drop down. I needed to add .item to my code

shinyApp(
  ui = 
    shinyUI(fluidPage(
      tags$head(
        tags$style(HTML("
        .option[data-value=a], .item[data-value=a]{
          background: red !important;
          color: white !important;
        }
        .option[data-value=b], .item[data-value=b]{
          background: green !important;
          color: white !important;
        }
  "))
      ),
      sidebarLayout(
        sidebarPanel(
          selectizeInput("select", label=NULL,
                         choices=c("a", "b"),
                         selected = c("a", "b"),
                         multiple=TRUE, options=list(placeholder="Wybierz"))),
        mainPanel())
    )
    ),
  server = function(input, output){}
)

This results in both the menu and drop down menu being coloured.

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)

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.

How to set font color in R shiny selectizeInput group titles?

Solution

You're close. Use this for the css:

.optgroup[data-group=\"Fruit\"] .optgroup-header {
    color: orange !important;
}

(And similarly for any other group headers you want to color.)

Why it works

Here's a snippet of the html generated for the dropdown:

<div class="selectize-dropdown-content">
    <div data-group="Fruit" class="optgroup">
        <div class="optgroup-header">Fruit</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Apples" data-selectable="" class="option">Apples</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Oranges" data-selectable="" class="option">Oranges</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div>
        <div data-value="Bananas" data-selectable="" class="option">Bananas</div> 
   </div>
        <div data-group="Year" class="optgroup"><div class="optgroup-header">Year</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
        <div data-value="2008" data-selectable="" class="option">2008</div>
...

The div that actually holds the option group label has the class optgroup-header. But it's the div one level up (of class optgroup) that has the disambiguating data-group attribute. So we need to specify, for example, that the optgroup-header child of the optgroup div where data-group is Fruit should have orange text.

Change background color of selectInput in R Shiny

Edited as requested in the comments below

You can add CSS through style tags as follows:

library(shiny)

server <- function(input, output) {
}

ui <- fluidPage(
  br(),
  tags$style("#select1 {border: 2px solid #dd4b39;}"),
  selectInput("select1", "Choose: ", c("Alt1.1", "Alt1.2"), selected = c("Alt1.1"), selectize = FALSE, multiple = TRUE),
  br(),
  tags$style("#select2 {background-color:blue;}"),
  selectInput("select2", "Choose: ", c("Alt2.1", "Alt2.2"), selected = c("Alt2.1"), selectize = FALSE, multiple = TRUE)
)

shinyApp(ui = ui, server = server)

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)

Change colour of pickerInput items in Shiny

You can apply the style you want in its arguments:

library(shiny)
library(shinyWidgets)

col.list <- c("red","blue","green","orange")

# Change the color
colors <- paste0("color:",col.list,";")

# Change the font
colors <- paste0(colors,"font-family: Arial;")

# Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To change the background simply apply the background

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")
#Change the color
colors <- paste0("background:",col.list,";")
#Change the color
colors <- paste0(colors,"color:white;")
#Change the font
colors <- paste0(colors,"font-family: Arial;")
#Change to bold
colors <- paste0(colors,"font-weight: bold;")

ui <- fluidPage(
    pickerInput("col", "Colour", multiple=T, choices = col.list, 
                choicesOpt = list(
                    style = colors)
    )
)

server <- function(input, output){}

shinyApp(ui, server)

To use the colors dynamically you can do the folowing:

library(shiny)
library(shinyWidgets)
col.list <- c("red","blue","green","orange")

ui <- fluidPage(
  column(2,
         pickerInput("change", "Select Colour", choices = col.list,multiple = FALSE)
  ),
  column(2,
         pickerInput("col", "Colour", multiple=T, choices = col.list)
  )
)
server <- function(input, output,session){

  observeEvent(input$change,{
    
    colors <- rep(paste0("color:",input$change,";"),length(col.list))
    updatePickerInput(session, "col", choices = col.list,
                      choicesOpt = list(
                        style = colors
                      )
    )
  })
  
}

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;}
"))

---

Related Topics