Change the background color of the selectInput component in Shiny to fit your

Question

Change the background color of the selectInput component in Shiny to fit your

Take a look at this sample shiny app:

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 = F))

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

The file mycss.css is located in a folder named www and includes the following styles:

#foo optgroup[label = "red"]{
  color: #990000;
}

#foo optgroup[label = "green"]{
  color: #009900;
}

I intend to further enhance the styling of the selectInput. Currently, the hover background color for an item is blue, but I want to set a unique hover color for each group individually.

https://i.sstatic.net/K9SIB.png

I've attempted several options like

#foo optgroup[label = "green"]:hover

without success. Any assistance would be greatly appreciated.

css r shiny

Answer 1

Answer №1

To achieve this, use the selectize = TRUE option along 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 be structured 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;
}

https://i.sstatic.net/gfqzU.png

Answer 2

To achieve this, use the selectize = TRUE option along 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 be structured 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;
}

https://i.sstatic.net/gfqzU.png

Change the background color of the selectInput component in Shiny to fit your

Answer №1

Similar questions

Why is the toggle list not functioning properly following the JSON data load?

Place the label and input elements next to each other within the form-group

Make the minimum height of one div equal to the height of another div

Understanding the differences between jquery's addClass method and the .css()

Disable the horizontal scrollbar on the x-axis within the Bootstrap 5 grid system

Add to and subsequently remove the possibility of deleting that element

When a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Issue with retrieving body class in Internet Explorer on Magento platform. The body class is not being recognized in IE, but works fine in Mozilla and Chrome

Role-based dynamic layout

Utilizing For Loops to Append Items to a List in R

What is the best way to align text in the vertical center?

Creating a React component with a circular loader that displays percentage and texts using Material-UI

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

What is the most appropriate unit of measurement for creating a responsive design?

Beginner in CSS wanting to set background image for input field

Using CSS3 to target the final <li> element within the main list in a nested <ul> structure

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

How to align scrolling images with their scroll origin - a step by step guide

Accessing archival Tweets using rtweet from the Premium API through R programming

occupying half of the screen