Customize the colors of individual checkboxes within a checkboxGroupInput in R Shiny

Question

Customize the colors of individual checkboxes within a checkboxGroupInput in R Shiny

I really want to customize the color of each individual checkbox in my checkboxGroupInput, moving away from the typical shiny blue. After doing some research, I came across a code snippet on Stack Overflow that changes the font color but not the checkboxes themselves.

library("shiny")

ui <- fluidPage(
  checkboxGroupInput(
    inputId = "my_cbgi",
    label = "Choose Something", 
    choiceNames = list(
      tags$span("A", style = "color: red;"),
      tags$span("B", style = "color: red;"), 
      tags$span("C", style = "color: blue;"), 
      tags$span("D", style = "font-weight: bold;")
    ),
    choiceValues = c("A", "B", "C", "D")
  )
)

server <- function(input, output) {

}

shinyApp(ui = ui, server = server)

I'm wondering if there is a way to tweak this code to actually change the colors of the checkboxes themselves rather than just the text. Any insights would be greatly appreciated!

css r shiny

Answer 1

Answer №1

To utilize the prettyCheckboxGroup from the shinyWidgets package, you can follow these steps:

library(shiny)
library(shinyWidgets)

items <- c("Apple", "Banana", "Orange")

CSS <- "
/* CSS for customized labels */
.pretty input[value=Apple]~.state span {
  color: red;
  font-weight: bold;
}
/* Styling for checkboxes */
.pretty input[value=Apple]~.state label:after, 
.pretty input[value=Apple]~.state label:before {
  background-color: red;
}
.pretty input[value=Banana]~.state label:after, 
.pretty input[value=Banana]~.state label:before {
  background-color: green;
}
.pretty input[value=Orange]~.state label:after, 
.pretty input[value=Orange]~.state label:before {
  background-color: blue;
}
/* Style for checked checkboxes */
.pretty.p-default input:checked~.state label:after {
  background-color: yellow !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  h1("Greetings"),
  prettyCheckboxGroup("fruits", label="Choose fruits", 
                      choiceNames = items, choiceValues = items, 
                      selected = items),
  verbatimTextOutput("choice")
)

server <- function(input,output,session){
  output$choice <- renderText(input$fruits)
}

shinyApp(ui, server)

Answer 2

To utilize the prettyCheckboxGroup from the shinyWidgets package, you can follow these steps:

library(shiny)
library(shinyWidgets)

items <- c("Apple", "Banana", "Orange")

CSS <- "
/* CSS for customized labels */
.pretty input[value=Apple]~.state span {
  color: red;
  font-weight: bold;
}
/* Styling for checkboxes */
.pretty input[value=Apple]~.state label:after, 
.pretty input[value=Apple]~.state label:before {
  background-color: red;
}
.pretty input[value=Banana]~.state label:after, 
.pretty input[value=Banana]~.state label:before {
  background-color: green;
}
.pretty input[value=Orange]~.state label:after, 
.pretty input[value=Orange]~.state label:before {
  background-color: blue;
}
/* Style for checked checkboxes */
.pretty.p-default input:checked~.state label:after {
  background-color: yellow !important;
}
"

ui <- fluidPage(
  tags$head(tags$style(HTML(CSS))),
  h1("Greetings"),
  prettyCheckboxGroup("fruits", label="Choose fruits", 
                      choiceNames = items, choiceValues = items, 
                      selected = items),
  verbatimTextOutput("choice")
)

server <- function(input,output,session){
  output$choice <- renderText(input$fruits)
}

shinyApp(ui, server)

Answer 3

Answer №2

Answering your question briefly, customizing checkboxes in HTML and CSS is not a straightforward task. If you're hesitant to directly modify the code, it's advisable not to invest time in this.

In creating the checkbox container, checkBoxGroupInput utilizes shiny:::generateOptions internally. A peek into the source reveals that altering the style of individual checkboxes isn't a simple feat as they all share the same class="checkbox" by default (a referenced response only covers setting a universal style for all choices).

The only solution I can suggest is directly injecting raw HTML into your UI. However, even this method gets complex because you cannot apply styles (like borders) directly to the checkbox element to influence its display, as explained in the aforementioned response. While exploring CSS myself, it seems that building new HTML checkboxes from scratch and layering them over the default ones might be the workaround (although hiding the default checkboxes successfully has proven challenging).

Below is a functional example catered to your requirements with its corresponding output displayed after the code snippet. Each scenario employs distinct wrappers (.my_checkBox_red, .my_checkBox_blue, and .my_checkBox_grey). There may exist a more efficient approach by just adjusting the relevant styles (color:, background-color:), but I haven't cracked this puzzle yet. Another enhancement could involve automating the lengthy HTML string generation, although I lack the bandwidth to tackle this at present. For those interested, delving into the shiny function checkBoxGroupInput or shiny:::generateOptions serve as great starting points, or build a personalized function with utilities like sprintf, paste, and so forth.

Hope this sheds some light on your query!

(function(){
  var themeSheet = document.createElement("style");
  themeSheet.type = "text/css";
  
  var cssString = '.my_checkBox input[type="checkbox"]+span {margin-left:10px};'
      + ' .my_checkBox input[type="checkbox"]:checked~label {font-weight:bold;}';
    
  themeSheet.innerHTML = cssString;
  document.head.appendChild(themeSheet);
}());

https://i.sstatic.net/7uc20.png

Answer 4

Answering your question briefly, customizing checkboxes in HTML and CSS is not a straightforward task. If you're hesitant to directly modify the code, it's advisable not to invest time in this.

In creating the checkbox container, checkBoxGroupInput utilizes shiny:::generateOptions internally. A peek into the source reveals that altering the style of individual checkboxes isn't a simple feat as they all share the same class="checkbox" by default (a referenced response only covers setting a universal style for all choices).

The only solution I can suggest is directly injecting raw HTML into your UI. However, even this method gets complex because you cannot apply styles (like borders) directly to the checkbox element to influence its display, as explained in the aforementioned response. While exploring CSS myself, it seems that building new HTML checkboxes from scratch and layering them over the default ones might be the workaround (although hiding the default checkboxes successfully has proven challenging).

Below is a functional example catered to your requirements with its corresponding output displayed after the code snippet. Each scenario employs distinct wrappers (.my_checkBox_red, .my_checkBox_blue, and .my_checkBox_grey). There may exist a more efficient approach by just adjusting the relevant styles (color:, background-color:), but I haven't cracked this puzzle yet. Another enhancement could involve automating the lengthy HTML string generation, although I lack the bandwidth to tackle this at present. For those interested, delving into the shiny function checkBoxGroupInput or shiny:::generateOptions serve as great starting points, or build a personalized function with utilities like sprintf, paste, and so forth.

Hope this sheds some light on your query!

(function(){
  var themeSheet = document.createElement("style");
  themeSheet.type = "text/css";
  
  var cssString = '.my_checkBox input[type="checkbox"]+span {margin-left:10px};'
      + ' .my_checkBox input[type="checkbox"]:checked~label {font-weight:bold;}';
    
  themeSheet.innerHTML = cssString;
  document.head.appendChild(themeSheet);
}());

https://i.sstatic.net/7uc20.png

Customize the colors of individual checkboxes within a checkboxGroupInput in R Shiny

Answer №1

Answer №2

Similar questions

Generating a zip file with password encryption in the R programming language

Angular disrupts the functionality of jQuery slideshow

showcasing a set of div elements by using forward and backward buttons

Unable to set items as sticky within mat-tabs

Move the container all the way to the left

Avoid having the browser automatically move focused elements that are navigated to using the tab key

Issues regarding the animation and hover effects of a button

Display a horizontal progression indicator during the page download process

In IE11, the letter type list with the style of lower-alpha no longer displays proper indentation

The presence of the `ng-scope` class is creating problems within the user interface

Exploring the similarities and differences between the precise and estimated versions of the Cumulative Distribution Function using the R programming command ec

employing logical operators in conjunction with characters

Having trouble with Vue.js implementation of Bootstrap tab navigation?

CSS HTML parent div cannot contain image properly

Is it possible to interpret the information in a text file as a query?

The combination of two tags can create a powerful and impactful presence

Utilize a custom attribute in Bootstrap 4 tooltips instead of the standard "title" attribute to define the text displayed in

Utilize the design elements stored in the database within Django

Problem with displaying fonts in web browsers

Include a prefix to each CSS selector in the imported CSS file