Change Background Color of Selectinput in R Shiny

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)

Sample Image

customize background color of selectInput in shiny

This is possible with selectize = TRUE and with css attribute selectors:

library(shiny)

ui <- fluidPage(tags$head(includeCSS("www/mycss.css")),
            selectInput("foo", "Choose", width = '20%',
                        multiple = F, selected = "red1", 
                        choices = list(red = c("red1", "red2"),
                                       green = c("green1", "green2")), 
                        selectize = T))

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

The css file should look like this:

div[data-value = 'red1'].active, div[data-value = 'red2'].active{
  background-color:#990000 !important;
  color: white;
}
div[data-value = 'red1'], div[data-value = 'red2']{
  color: #990000;
}

div[data-value = 'green1'].active, div[data-value = 'green2'].active{
  background-color:#009900 !important;
  color: white;
}
div[data-value = 'green1'], div[data-value = 'green2']{
  color: #009900;
}

Sample Image

Shiny Dashboard change background color of slectInput

Ok I got it. With an uiOutput and an if else statement.

I create a new uiOutput Element and uses the statement in the render Method:

uiOutput("style_select_1")      

output$style_select_1<- renderUI({
        if(is.null(input$select_1)){
          return()
        }
        else if(input$select_1!= 'Default'){
          return(tags$style("#select_1{background-color:red;color:white;}"))
        }
      })

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

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

Use javascript to change the backround color of selectinput in R shiny

It should work if you put selectize = FALSE.

By default selectInput has selectize = TRUE which uses selectize.js.

So if you run your code as is then you should see your select is showing up as display: none
Sample Image

So your output$menu will be something like

  output$menu<-renderUI({

    sidebarPanel(width = 2,
                 selectInput("sel","",
                             choices = c("Home","About","Sector A","Sector B","Sector C"),
                             selected = "Home", selectize = FALSE),
                 tags$style(
                   "select#sel {background: #FFA500}"
                 )
    )
  })

How to change background color and text color of a titlePanel in R Shiny?

titlePanel("This is my title")
tags$style(HTML("
    body {
            background-color: Black;
            color: white;
            }"))

You can use titlePanel to set your title in shiny instead of wrapping in HTML, and then for the CSS, it needs to be completely wrapped by HTML() and Quotes for it to work.

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

R shiny : change background color based on input

I'm sure there are better ways to do it but this solution works. The idea is to render a UI each time input$tools changes so that tags$style can be modified.

library(shiny)
library(tidyverse)

ui <- fluidPage(
    selectInput("tool", "Choose your tool",
                choices = c("Tool 1", "Tool 2",
                            "Tool 3"),
                selected = "Tool 1", multiple = FALSE),
    
    uiOutput('background_change') )

server <- function(input, output, session) {
    
    bg <- reactive({
        case_when(input$tool =='Tool 1' ~ 'body {
                                             background-color: red;
                                             color: white;
                                        }',
                  input$tool =='Tool 2' ~ 'body {
                                            background-color: orange;
                                            color: white;
                                        }',
                  input$tool =='Tool 3' ~ 'body {
                                            background-color: brown;
                                            color: white;
                                        }',
      TRUE  ~ 'body {
                background-color: red;
                color: white;
                }')
    })
    
    
    
    output$background_change <- renderUI({
        tagList(fluidPage(tags$style(HTML(bg()))))
    })
    
}

shinyApp(ui, server)

Related Topics

How to Set Up a Dynamic Grid Based on Flex or Grid

How to Override Bootstrap 3 Styles with External Custom CSS

Print Stylesheets for Pages with Long Horizontal Tables

Change Background Color of Selected Items in "Multiselect" Dropdown Box

Print Scale by CSS

How to Prevent HTML Elements from Overlapping or Sliding Under One Another

How to Create Alligator (Or Sawtooth) Border Using CSS or Svg

How to Vertically Align Objects in CSS When Working with CSS Grids

Ie Doesn't Support Height=Auto for Images, What Should I Use

Css3 Cross Browser Opacity

Make Flex Items Stretch Full Height and Vertically Center Their Content

Convert New Line /N to a Line Break in Angular

What's the Trick to Inspect Popout/Dropdown Menu Style with Firebug

Create a W3C Validated Anchor Link with Target="_Blank"

How to Override Opacity for a Child

CSS Content Attribute for Img Tag

CSS - 100% + Padding

Preventing Browser Text Input Suggestions


Leave a reply



Submit