Customizing RShiny Widgets: Adding Color to radioButtons() and checkboxGroupInput()

In my RShiny application, I am utilizing multiple checkboxGroupInput() and radioButtons(). Here is an example of one code snippet:

checkboxGroupInput(inputId = "maDays", label = "Select Trading Days", 
                                      choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                                  "Friday", "Saturday", "Sunday"),
                                      selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                                   "Friday"), 
                                      inline = TRUE),
radioButtons(inputId = "maTimeGran", label = "Select Time Granularity", 
                                choices = c("Hourly" = "hour", "Daily" = "day", 
                                            "Weekly" = "week"),
                                selected = "day")

This setup generates the following output:

https://i.sstatic.net/vSDUD.png https://i.sstatic.net/WCbOt.png

I am interested in changing the color of all selected radio buttons (button itself, not the text) and checkmarks (not the text) using a css style. My preferred color for this customization would be #007d3c.

Answer №1

I successfully modified the technique found at https://dev.to/kallmanation/styling-a-radio-button-with-only-css-4llc to achieve the desired outcome. (The checkboxes now display a solid fill color instead of checkmarks when selected.)

Check out the code snippet below:

library(shiny)

ui <- fluidPage(
    tags$head(
        tags$style(HTML("
                    label > input[type='radio'] {
                        opacity: 0;
                        position: absolute;
                    }
                    label > input[type='radio'] + *::before {
                        content: '';
                        margin: 4px 0 0;
                        width: 13px;
                        height: 13px;
                        position: absolute;
                        margin-left: -20px;
                        border-radius: 50%;
                        border-style: solid;
                        border-width: 0.1rem;
                        border-color: #007d3c;
                    }
                    label > input[type='radio']:checked + *::before {
                        background: radial-gradient(white 0%, white 30%, #007d3c 30%, #007d3c);
                                border-color: #007d3c;
                    }
                    label > input[type='checkbox'] {
                        opacity: 0;
                        position: absolute;
                    }
                    label > input[type='checkbox'] + *::before {
                      content: '';
                      position: absolute;
                      margin: 4px 0 0;
                      margin-left: -20px;
                      align: center;
                      width: 13px;
                      height: 13px;
                      margin-right: 1rem;
                      border-radius: 0%;
                      border-style: solid;
                      border-width: 0.1rem;
                      border-color: #007d3c;
                    }
                    label > input[type='checkbox']:checked + *::before {
                      content: '';
                      width: 13px;
                      height: 13px;
                      background-color: #007d3c;
                    }
                  "))
    ),
    checkboxGroupInput(inputId = "maDays", label = "Select Trading Days", 
                       choices = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                   &qout;Friday", &qout;Saturday", &qout;Sunday"),
                       selected = c("Monday", "Tuesday", "Wednesday", "Thursday",
                                    "Friday"), 
                       inline = TRUE),
    radioButtons(inputId = "matimegran", label = "Select Time Granularity", 
                 choices = c("hourly" = "hour", "daily" = "day", 
                             "weekly" = "week"),
                 selected = "day")
)

server <- function(input, output) {
    ## put server code here
}

shinyapp(ui = ui, server = server)

And below is my original response, which alters the style of labels for checked elements in case others find it helpful:

library(shiny)

ui <- fluidpage(
    tags$head(
        tags$style(HTML("
                  input:checked + span {
                    color: #007d3c;
                  }
                  "))
    ),
    checkboxgroupinput(inputid = "madays", label = "select trading days", 
                       choices = c("monday", "tuesday", "wednesday", "thursday",
                                   "friday", "saturday", "sunday"),
                       selected = c("monday", "tuesday", "wednesday", "thursday",
                                    "friday"), 
                       inline = true),
    radiobuttons(inputid = "matimegran", label = "select time granularity", 
                 choices = c("hourly" = "hour", "daily" = "day", 
                             "weekly" = "week"),
                 selected = "day")
)

server <- function(input, output) {
  ## put server code here
}

shinyapp(ui = ui, server = server)

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

In-depth selection determined by the %in% comparison

I am struggling with a basic task. I am trying to select rows grouped by id that have specific values (-1, -2, -3, -4), and then assign tags based on this criteria. id time 1 1 -4 2 1 -3 3 1 -2 4 1 -1 5 2 -1 6 2 -2 7 3 -1 8 ...

Centering the viewport on a spacious website

Currently, I am working on developing a horizontal website that spans 16000px using a specific template that can be found at the following link: http://tympanus.net/Tutorials/WebsiteScrolling/ The website is divided into four sections, each 4000px wide. M ...

Steps for aligning a grid column to the same height as the element above it and moving it to the left side

I have a setup using material UI where I have a grid positioned on top of a Paper element. Within the grid, there is a text input field in the first column that I want to match the height of the paper element and be aligned with its left border. I have tri ...

What steps can I take to improve the smoothness of my Slick slider and ensure it functions correctly across all screen widths

I have been experimenting with a carousel slider using Slick Carousel (). My goal is to make it loop infinitely and function smoothly at different browser widths without the cards stacking, but it's not quite working as intended yet. Currently, there ...

Tips for personalizing the FileField in wtforms to function as an image button

I'm attempting to display an image from my project's directory as an icon instead of the standard "choose file" button. Unfortunately, my attempts thus far have been unsuccessful. Not only is the image not loading, but the original button is only ...

Performing the SAS univariate analysis in the R programming language

Being relatively new to the world of statistics and R, I am on the lookout for an equivalent of the lognormal distribution found in proc univariate in SAS but coded in R. The code snippet looks something like this: Proc univariate data = dat; histogram kil ...

CSS form not aligning properly within wrapper div and appears to be floating outside of it

I am in the process of creating a website that includes a wrapper div containing a: -Header -Content -Footer The issue I am encountering is when I insert regular text into the content section, everything displays properly and the background stretches s ...

When I view my PHP file with embedded HTML elements in Laravel on the XAMPP Apache server, the display is not rendering correctly

I've been attempting to translate my HTML project into a PHP format while delving into the world of Laravel. However, after integrating codes from my old HTML files into my new PHP files in Laravel and running them on the XAMPP Apache server, I am onl ...

What is causing the parse error in my CSS code?

Running into a parse error on line 314 of my css (style.css). The error is "} expected css(css-rcurlyexpected)". Even after adding the necessary curly brace, it still doesn't validate. Below is my CSS starting from line 314 till the end: /* CSS code ...

Barplot demonstrating summarized values using dplyr

I have collected data from a top 3 ranking. My goal is to generate a plot where the x-axis represents the column name (cost/product) and the y-axis represents the frequency (preferably the relative frequency, although I am unsure of how to achieve this usi ...

HTML Settings Menu: Customize Your Preferences

Greetings! I am currently in the process of creating a website and am seeking advice on how to approach incorporating a menu option. After researching, I discovered that the <menu> tag is not supported by major browsers, which came as a surprise. Add ...

What do the different colored highlights in Sublime Text 2 indicate?

I am facing an issue with the code in a particular file: background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); Interestingly, Sublime Text 2 appears to highlight the background of indigo and violet with a light blue color: ...

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: https://i.sstatic.net/fIkQr.png Upon inspecting in Chrome developer tools, I noticed that the ele ...

Using the feColorMatrix SVG filter in CSS versus applying it in JavaScript yields varied outcomes

If we want to apply an SVG filter on a canvas element, there are different ways to achieve this. According to this resource, we can apply a SVG filter to the CanvasRenderingContext2D in javascript using the following code snippet: ctx.filter = "url(#b ...

Extracting a specific subset of data within a larger dataset, condensed into a single row

Is there a way to extract a subset of columns in a single statement from a larger data frame? Below is an example of what I have attempted: df = data.frame(C1 = c(1,2,3), C2 = c("V1", "V2", "V3"), C3 = c(3,2,1)) col_is_num = sapply(df, is.numeric) col_is_ ...

What is the process for transforming Inline CSS code into an External File CSS Code?

I'm having a bit of trouble with my WordPress website. I want to format the comments section of each post to look like the image below, but I need help converting from inline CSS to external CSS and implementing it on the webpage. https://i.sstatic.ne ...

Choosing specific points for measurement (cross-sectional) from longitudinal data using R

Looking to extract only the latest measurement for each sample from a set of longitudinal data for a specific measurement. Consider a scenario where the time taken for a group of individuals to run a mile is recorded over multiple trials. The goal is to is ...

After resizing, a div with a height of 100% will scroll upwards

I have a single-page website consisting of three sections, each spanning the entire width and height of the window. While resizing the window on the first or last section, everything adjusts smoothly. However, when I am on the second section, things get a ...

Ways to utilize the ::after pseudo class with ElementRef within Angular

Is it possible to manipulate the background-color of the ::after pseudo selector for the specified element using Angular? @ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef; ngAfterViewInit(): void { const el ...

Adjusting the parent with CSS transitions to perfectly align with the final height of a

Jade example div.parent div.child1 div.child2 Upon initial load, Child1 is visible. Clicking will hide Child1 and make Child2 visible. Another click will reverse this action. During the transition between hiding and showing the children, there s ...