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.

I've attempted several options like 

#foo optgroup[label = "green"]:hover
without success. Any assistance would be greatly appreciated.

cssrshiny

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

Tips for positioning an inner div within an outer div

Code Snippet: <div style="width: 300px; position: absolute; right: 25%; top: 5%; -webkit-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);box-shadow: 2px 4px 40px 0px rgba(0,0,0,0.75);"> <secti ...

htmlcss

Animation of two divs stacked on top of each other

I am trying to replicate the animation seen on this website . I have two divs stacked on top of each other and I've written the following jQuery code: $('div.unternehmen-ahover').hover( function () { $('div.unternehmen-ahover' ...

javascriptjquerycsshtmlslider

Javascript and CSS combo for creating a stylish fade effect

Hey everyone, I have a design challenge where I need to change the color of a picture inside a box when the user hovers over it. I have four boxes like this and my goal is to make everything else fade out when a user hovers over a specific box. Anyone kn ...

javascripthtmlcss

Tips for loading a webpage with optimal speed and efficiency

I am inspired by the sleek design of Apple's website and want to replicate some of its features in my project (best viewed on FF, Chrome, Safari): Initially, the page appears empty except for the header - but the final height of the page is already ...

jqueryajaxhtmlcss

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

Issue with a responsive CSS circle element that holds an image

I'm struggling to figure out how to create 9 responsive CSS circles in a row, with each circle containing an img tag rather than a background image. The goal is to center the img and resize it based on the size of its parent circle div. These 9 circle ...

htmlcssresponsive

Struggling to keep the footer anchored at the bottom of the page

When the content on an HTML page is minimal, the footer may end up positioned halfway up the page, creating a blank space below. This can be unappealing, especially on larger screens. Designers are frequently tasked with moving footers to the bottom of the ...

htmlcssresponsive-design

What is the proper way to arrange CSS classes in a specific order?

I am facing some confusion regarding the CSS and the class attribute. I had always believed that the order in which multiple classes are specified within the attribute value holds significance. It was my understanding that the later class could or should o ...

htmlcss

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3

Change the text in a CSS checkbox label when it is selected

There is an innovative Pure-CSS accordion that caught my eye, but I have a unique feature in mind that I would like to incorporate. What I am looking for is the ability for the labels to dynamically change based on the state of the checkboxes without relyi ...

csscheckboxaccordiondisplay

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

I am facing an issue with my paragraph element that has the display property set to hidden. I have split each word of the paragraph and placed them inside individual span elements. My goal is to create an effect where each word comes from different locatio ...

javascripthtmlcss

How can I make text wrap instead of overflowing to ellipsis in a list when using vue-material?

Question: <md-list-item> <md-icon v-bind:style="{color: transcript.color}">account_circle</md-icon> <div class="md-list-item-text"> <p>{{ transcript.text }}</p> </di ...

cssvue.jsmaterial-designvue-material

Having trouble repositioning a div element in CSS

I am having an issue with my code. The problem I'm facing is that I am unable to move the green div.free_space below the other two divs, div.main_pic and div.navigation. I don't understand why this is happening. As I am still learning, I would g ...

htmlcss

After a group of floated items, there will be an automatic "clear: both" applied

Within my Content Management System, I have custom Elements that need to be floated next to each other. Instead of adding an extra div with a class of "clear", I want to automatically insert a clear: both at the end using CSS3. I attempted this workaround ...

htmlcsscss-float

PHP: Link to logo in different folder by including 'nav.php'

I am facing an issue with my nav.php file: <div> <!-- there's a lot of code here so I want to write it once and include it in all pages within the main folder as well as subfolders <img src="logo.png"> </div> The structur ...

javascriptphphtmlcss.htaccess

I'm having trouble getting my HTML to scroll properly

Apologies for asking a common question, but I'm facing a specific issue with scrolling that I can't seem to figure out. Below is the code snippet: * { font-family: Arial, Helvetica, sans-serif; text-align: center; font-size: 40px; } < ...

htmlcssscroll

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

htmlcss

Highlighted text with CSS

For this exercise, I was provided with the following HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Selected text</title> </head> <body> <div class ...

csscss-selectorsselection

Is it possible to position my label above my text box input?

Having trouble aligning the checkbox label with the edge of the text area in my login form code. It always ends up on the right side, outside of the div container when inspected. I've attempted setting a left value for the label, but it causes issues ...

htmlcss